Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Change the style of bottom border with CSS

Javascript Web Development Front End Scripts

The border-bottom-style property changes the style of the bottom border of an element. This CSS property allows you to define how the bottom border line appears visually.

Syntax

border-bottom-style: none | solid | dashed | dotted | double | groove | ridge | inset | outset;

Available Border Styles

The border-bottom-style property accepts the following values:

  • solid - A single solid line
  • dashed - A series of short dashes
  • dotted - A series of dots
  • double - Two solid lines
  • groove - A 3D grooved border
  • ridge - A 3D ridged border
  • inset - A 3D inset border
  • outset - A 3D outset border
  • none - No border (default)

Example: Dashed Bottom Border

<html>
   <head>
      <style>
         .dashed-border {
            border-width: 4px;
            border-bottom-style: dashed;
            border-bottom-color: #333;
            padding: 10px;
            margin: 10px 0;
         }
      </style>
   </head>
   <body>
      <p class="dashed-border">
         This paragraph has a dashed bottom border
      </p>
   </body>
</html>

Example: Multiple Border Styles

<html>
   <head>
      <style>
         .border-demo {
            border-width: 3px;
            border-bottom-color: #007bff;
            padding: 15px;
            margin: 10px 0;
            background-color: #f8f9fa;
         }
         
         .solid { border-bottom-style: solid; }
         .dotted { border-bottom-style: dotted; }
         .double { border-bottom-style: double; }
         .groove { border-bottom-style: groove; }
      </style>
   </head>
   <body>
      <div class="border-demo solid">Solid bottom border</div>
      <div class="border-demo dotted">Dotted bottom border</div>
      <div class="border-demo double">Double bottom border</div>
      <div class="border-demo groove">Groove bottom border</div>
   </body>
</html>

Key Points

  • The border-bottom-style property only affects the bottom border of an element
  • You must set border-width for the border style to be visible
  • The default value is none, which means no border is displayed
  • 3D effects (groove, ridge, inset, outset) work best with thicker borders

Conclusion

The border-bottom-style property provides flexible control over bottom border appearance. Combine it with border-width and border-color for complete border styling.

Updated on: 2026-03-15T23:18:59+05:30

199 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements