CSS border-bottom-style Property – All Values with Examples

The CSS border-bottom-style property sets the line style of an element's bottom border — whether it is drawn as a solid line, a series of dashes, a 3D groove, and so on. It controls only the bottom edge, leaving the other three sides untouched.

Use this property when you want to style one side independently — for example, an underline-style divider beneath a heading, or a dashed bottom rule on a card. When you want the same style on all four sides, the border-style shorthand is more concise.

The border-bottom-style property has no visible effect on its own unless a border color and width are also present. Pair it with border-bottom-width and border-bottom-color, or set everything at once with the border-bottom shorthand. The exception is none (the default), which removes the border entirely regardless of width or color.

Info

The CSS specification does not define how borders of different styles connect at corners, so adjacent sides with different styles may join in browser-specific ways.

Initial Value	`none`
Applies to	All elements.
Inherited	No.
Animatable	No.
Version	CSS1
DOM Syntax	`object.style.borderBottomStyle = "dotted";`

Syntax

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

Values

Value	Description
`none`	No border is drawn. Default value.
`hidden`	Same visual result as `none` on normal elements, but suppresses adjacent borders in table border-conflict resolution.
`dotted`	A series of round dots.
`dashed`	A series of short dashes.
`solid`	A single unbroken line.
`double`	Two parallel solid lines. The combined thickness plus the gap equals the value of `border-bottom-width`.
`groove`	A 3D effect that makes the border look carved into the page. The opposite of `ridge`.
`ridge`	A 3D effect that makes the border look raised above the page. The opposite of `groove`.
`inset`	A 3D effect that makes the entire element look pressed into the page. The opposite of `outset`.
`outset`	A 3D effect that makes the entire element look raised out of the page. The opposite of `inset`.
`initial`	Sets the property to its default value (`none`).
`inherit`	Inherits the value from the parent element.

Examples

Solid and dashed borders

The most commonly used values are solid and dashed. Here a heading gets a solid bottom border and a div gets a dashed one.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        border-bottom-style: solid;
      }
      div {
        border-bottom-style: dashed;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a solid bottom border</h2>
    <div>A div element with a dashed bottom border.</div>
  </body>
</html>

Try it Yourself »

Double, dashed, and groove borders

This example combines several values. Note that groove and other 3D styles need a wider border (here 8px) to be visible — thin borders collapse the 3D shading.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        border-bottom-style: double;
      }
      p {
        border-style: solid;
        border-bottom-style: dashed;
      }
      div {
        border-bottom-style: groove;
        border-bottom-width: 8px;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a double bottom border</h2>
    <p>A paragraph with a dashed bottom border (overrides the solid shorthand on the bottom side).</p>
    <div>A div element with a groove bottom border.</div>
  </body>
</html>

Try it Yourself »

The `hidden` value

hidden looks identical to none on a regular element, but it behaves differently in table border-conflict resolution: a hidden border always wins and suppresses the neighboring cell's border.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: red;
        text-align: center;
        border: 5px solid black;
        border-bottom-style: hidden;
      }
    </style>
  </head>
  <body>
    <h1>Border on three sides — bottom is hidden</h1>
  </body>
</html>

Try it Yourself »

The `inset` value

inset is a 3D style that makes the box look pressed into the page. The shading is derived from the border color, so it is most visible with a wider border.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: red;
        text-align: center;
        border: 5px solid;
        border-bottom-style: inset;
      }
    </style>
  </head>
  <body>
    <h1>Inset bottom border example</h1>
  </body>
</html>

Try it Yourself »

The `outset` value

outset is the opposite of inset: it makes the box look raised out of the page. Together, inset, outset, groove, and ridge are the four 3D border styles, and all four depend on the border color to create their shading effect.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-align: center;
        border: 5px solid;
        border-bottom-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Outset bottom border example</h1>
  </body>
</html>

Try it Yourself »

When to use each value

solid — the default choice for most UI elements (cards, inputs, dividers).
dashed and dotted — useful for secondary dividers, drag-and-drop targets, or anything that needs a lighter visual weight than a solid line.
double — occasionally used for decorative headings; at least 3px wide is needed to see both lines and the gap.
groove / ridge — classic 3D effects; rarely used in modern flat UI but still valid.
inset / outset — can simulate button-press effects; consider a box-shadow instead for finer control.
hidden — primarily a table layout tool; avoid on non-table elements where none is clearer.

Common gotchas

A border style alone renders nothing if border-bottom-width is 0 or border-bottom-color is transparent. Always verify all three border sub-properties are set.
Overriding the border-bottom shorthand after border-bottom-style resets the style back to none. Declaration order matters.
The double value requires at least 3px width to render two distinct lines.
The four 3D values (groove, ridge, inset, outset) look identical to ridge/groove in some browsers when the border color is currentColor on a dark background — always test with an explicit color.

border-bottom — shorthand for the bottom border's width, style, and color.
border-bottom-width — sets the thickness of the bottom border.
border-bottom-color — sets the color of the bottom border.
border-style — sets the line style for all four sides at once.
border-top-style — the equivalent property for the top edge.
border-left-style — the equivalent property for the left edge.
border-right-style — the equivalent property for the right edge.

Practice

Which of the following are valid values for the border-bottom-style property in CSS?

Syntax

Values

Examples

Solid and dashed borders

Double, dashed, and groove borders

The hidden value

The inset value

The outset value

When to use each value

Common gotchas

Related properties

Practice

The `hidden` value

The `inset` value

The `outset` value