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

  • Initial valuenone
  • Applies toAll elements
  • InheritedNo
  • MediaVisual
  • Computed valueSpecified value
  • AnimatableNo
  • CSS VersionCSS2, CSS3
  • JavaScript
Formal syntax: <line-style>

border-bottom-style: none;
border-bottom-style: hidden;
border-bottom-style: dotted;
border-bottom-style: dashed;
border-bottom-style: solid;
border-bottom-style: double;
border-bottom-style: groove;
border-bottom-style: ridge;
border-bottom-style: inset;
border-bottom-style: outset;
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
  • 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
.class {
   border-bottom-style: dotted;

Click the button below to experiment with this property.

Give it a Try!


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.