CSS border-bottom-width Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The border-bottom-width property controls the thickness of the bottom edge of an element’s border box. Visually, it determines how much space the bottom border occupies when the element is painted; in the box model this thickness contributes to the border area and can change the element’s total rendered size unless the sizing model is altered via box-sizing. Because it is a side-specific border property, it affects only the bottom edge and can be used independently from the other three border-side widths.

A bottom border’s appearance depends on more than just its thickness: the border must have a style that produces a visible stroke and a non-transparent color to be seen. That means border-style must be something other than none/hidden for the width to draw, and border-color determines the border’s color. If the style produces no stroke or the color is fully transparent, changes to the bottom width will not produce a visible line even though the border box still reserves the border area.

Authoring and overrides: the side-specific property overrides the corresponding value supplied by a shorthand or a multi-side property, so border-width or the shorthand border-bottom can set widths for multiple sides but can be selectively overridden by the side-specific setting. border-bottom-width does not inherit from parent elements; changing it typically triggers repaint and may trigger reflow if it affects computed dimensions. It is commonly animated or transitioned to create visual effects, and because it is part of the border area its changes interact with layout and hit-testing in predictable ways according to the box model.

Definition

Initial value: medium
Applies to: All elements
Inherited: No
Computed value: Absolute length; '0' if the border style is 'none' or 'hidden'
Animatable: Yes
JavaScript syntax: object.style.borderBottomWidth

Interactive Demo

border-bottom-width: 4px;

border-bottom-width: 1em;

border-bottom-width: thick;

border-bottom-width: 9mm;

border-bottom-width: transparent;

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-width: <line-width>

Values

<line-width> = <length> | thin | medium | thick

thinLess than the default width.
mediumDefault value.
thickGreater than the default width.
<length>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
inherit

Example

HTML

  <div class="example">

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



    <div class="box thin">Thin (1px)</div>



    <div class="box medium">Medium (4px)</div>



    <div class="box thick">Thick (8px)</div>



    <div class="box rem">Relative (0.5rem)</div>

  </div>

CSS

.example {
  max-width: 640px;
  margin: 24px auto;
  font-family: Arial, Helvetica, sans-serif;
  color: #222;
}

.example h2 {
  margin: 0 0 16px 0;
  font-size: 18px;
}

.box {
  padding: 12px 16px;
  margin: 12px 0;
  background: #f8f9fb;
  border-bottom-style: solid;
  border-bottom-color: #2c3e50;
}

.box.thin {
  border-bottom-width: 1px;
}

.box.medium {
  border-bottom-width: 4px;
}

.box.thick {
  border-bottom-width: 8px;
}

.box.rem {
  border-bottom-width: 0.5rem;
}

Result

Editor

Browser Support

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