1. css
  2. /properties
  3. /border-bottom-style



The border-bottom-style property is a CSS property that specifies the style of the bottom border of an element. It is used to control the appearance of the element's bottom border.


No border

.element {
  border-bottom-style: none;

Hidden border

.element {
  border-bottom-style: hidden;

Dotted border

.element {
  border-bottom-style: dotted;

Dashed border

.element {
  border-bottom-style: dashed;

Solid border

.element {
  border-bottom-style: solid;

Double border

.element {
  border-bottom-style: double;

Groove border

.element {
  border-bottom-style: groove;

Ridge border

.element {
  border-bottom-style: ridge;

Inset border

.element {
  border-bottom-style: inset;

Outset border

.element {
  border-bottom-style: outset;


noneNo border is drawn.
hiddenSame as none, but has different behavior in some contexts.
dottedThe border is a series of dots.
dashedThe border is a series of short lines.
solidThe border is a solid line.
doubleThe border is two solid lines.
grooveThe border looks like a groove.
ridgeThe border looks like a ridge.
insetThe border looks like it is embedded in the element.
outsetThe border looks like it is coming out of the element.
initialSets the border-bottom-style to its default value.
inheritThe element inherits the border-bottom-style value from its parent element.
unsetThe element's border-bottom-style is set to the value specified in the user agent's style sheet, if any. If there is none, it will be the default value.

Best Practices

  • Use the appropriate border style for the context and design of your site.
  • Avoid using too many different border styles on a single page as it can be visually overwhelming.
  • Make sure the border style matches the overall design and layout of your site.
  • Use the border-bottom-style property in conjunction with the border-bottom-color and border-bottom-width properties to fully define the bottom border of an element.
  • Consider the layout and hierarchy of your content when deciding which border style to use. For example, you may want to use a solid border for header elements but a dotted

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera