CSS border-bottom-width Property

Description

The border-bottom-width property specifies the width of the bottom border of an element. Note that in many cases the shorthand CSS property border-width is more convenient and preferable.

Initial value
medium
Applies to
All elements
Inherited
No
Media
Visual
Computed value
Absolute length; '0' if the border style is 'none' or 'hidden'
Animatable
Yes
CSS Version
CSS1, CSS2, CSS3
JavaScript syntax
object.style.borderBottomWidth

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

<div class="border">This is an example of the border-bottom-width property using a red solid border 3px in width.</div>
.border {
   border: 1px solid blue;
   border-bottom-style: solid;
   border-bottom-width: 3px;
   border-bottom-color: red;
   margin: 20px;
   padding: 20px;
}

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
412113.51
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
2.318410.11?

Last updated by CSSPortal on: 12th October 2019