This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

border-bottom-style

Summary

Sets the style of an element’s bottom border. To set all four borders, use the shorthand property, border-style. Otherwise, you can set the borders individually with border-top-style, border-right-style, border-bottom-style, border-left-style.

Overview table

Initial value
none
Applies to
All elements
Inherited
No
Media
visual
Computed value
specified value
Animatable
No
CSS Object Model Property
borderStyleTop
Percentages
N/A

Syntax

  • border-bottom-style: dashed
  • border-bottom-style: dotted
  • border-bottom-style: double
  • border-bottom-style: groove
  • border-bottom-style: hidden
  • border-bottom-style: inset
  • border-bottom-style: none
  • border-bottom-style: outset
  • border-bottom-style: ridge
  • border-bottom-style: solid

Values

none
Default. Border is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn. See background-image.
hidden
Same 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.
dotted
A series of round or square dots.
dashed
A series of square-ended dashes.
solid
A single line segment.
double
Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the border-width value. The border width must be at least 3 pixels wide to draw a double border.
groove
Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the border-color.)
ridge
Looks as if it were coming out of the canvas.
inset
Looks as if the content on the inside of the border is sunken into the canvas.
outset
Looks as if the content on the inside of the border is coming out of the canvas.

Examples

Border styles in CSS.

.one {
  border-bottom-style: none;
}

.two {
  border-bottom-style: outset;
}

.three {
  border-bottom-style: hidden;
}

.four {
  border-bottom-style: dotted;
}

.five {
  border-bottom-style: dashed;
}

.six {
  border-bottom-style: solid;
}

.seven {
  border-bottom-style: double;
}

.eight {
  border-bottom-style: groove;
}

.nine {
  border-bottom-style: ridge;
}

.ten {
  border-bottom-style: inset;
}

View live example

Notes

  • Borders are drawn in front of the element’s background, but behind the element’s content (in case it overlaps).
  • There is no control over the spacing of the dots and dashes, nor over the length of the dashes.
  • How borders of different styles are joined in the corner may vary.
  • Rounded corners may cause the corners and the contents to overlap, if the padding is less than the radius of the corner.

Related specifications

CSS Level 3 - Backgrounds and Borders Module
Candidate Recommendation

See also

Related articles

Border

Attributions