CSS border-bottom-style Property

Description

The border-bottom-style property determines how the bottom edge of an element’s box is rendered visually - it specifies the appearance of that single edge independent of the other three sides. It is part of the CSS box model and only affects the bottom border layer; it does not inherit from ancestors and applies to the element’s border box according to the normal painting order. Conceptually, it controls the border’s visual motif while leaving the thickness and color to their respective properties.

This property composes with the matching width and color properties to produce the final painted border. For example, the bottom border’s appearance is the result of combining the style set by this property with the thickness from border-bottom-width and the hue/opacity from border-bottom-color. It is also affected by shorthands: specifying a shorthand such as border-bottom can set this property together with its width and color in a single declaration.

Because borders are rendered in the element’s border layer, the chosen style changes not only the visual outcome but also how the border participates in layout and hit testing. If the style yields no visible line, the border may effectively not contribute to the visual outline of the box even though width properties still exist; when a visible style is used, the border occupies the space defined by its width and can influence spacing and clipping. In complex layouts, the style also determines how adjacent borders are resolved and painted.

In contexts such as tables and international (logical) layouts, the effective bottom border can interact with other rules. Table border collapsing rules, controlled by border-collapse, change how adjacent cell borders combine, which can make the bottom-edge style behave differently than on ordinary boxes. For flow-relative layouts and writing-mode adaptations, the logical equivalent border-block-end-style provides the same role in a writing-mode-aware way.

Definition

Initial value: none
Applies to: All elements
Inherited: No
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.borderBottomStyle

Interactive Demo

border-bottom-style: none;

border-bottom-style: dotted;

border-bottom-style: dashed;

border-bottom-style: solid;

border-bottom-style: double;

border-bottom-style: groove;

border-bottom-style: inset;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

border-bottom-style: <line-style>

Values

noneBorder is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn.
hiddenSame as none, except in terms of conflict resolution of collapsed borders. Any element with a hidden border suppresses all shared borders at that location. Borders with a style of none have the lowest priority.
dottedA series of round dots.
dashedA series of square-ended dashes.
solidA single line segment.
doubleTwo parallel solid lines with some space between them.
grooveDisplays a border leading to a carved effect. It is the opposite of ridge.
ridgeLooks as if it were coming out of the canvas.
insetLooks as if the content on the inside of the border is sunken into the canvas.
outsetLooks as if the content on the inside of the border is coming out of the canvas.
inherit

Example

HTML

<div class='demo'>

    <h2>border-bottom-style examples</h2>

    <div class='box solid'>Solid</div>

    <div class='box dotted'>Dotted</div>

    <div class='box dashed'>Dashed</div>

    <div class='box double'>Double</div>

    <div class='box groove'>Groove</div>

    <div class='box ridge'>Ridge</div>

    <div class='box inset'>Inset</div>

    <div class='box outset'>Outset</div>

    <div class='box none'>None</div>

</div>

CSS

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    padding: 24px;
    background: #f7f7fb;
}

.demo {
    max-width: 720px;
    margin: 0 auto;
}

.demo h2 {
    margin-bottom: 18px;
    font-size: 18px;
}

.box {
    background: #fff;
    padding: 14px 16px;
    margin: 10px 0;
    border-bottom-width: 4px;
    border-bottom-color: #2b2b2b;
}

.box.solid  { border-bottom-style: solid; }
.box.dotted { border-bottom-style: dotted; }
.box.dashed { border-bottom-style: dashed; }
.box.double { border-bottom-style: double; }
.box.groove { border-bottom-style: groove; }
.box.ridge  { border-bottom-style: ridge; }
.box.inset  { border-bottom-style: inset; }
.box.outset { border-bottom-style: outset; }
.box.none   { border-bottom-style: none; }

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-bottom-style property. Hover over a browser icon to see the version that first introduced support for this CSS property.