border-bottom-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Theborder-bottom-styleCSS property sets the line style of an element's bottomborder.

Note:The specification doesn't define how borders of different styles connect in the corners.

Try it

border-bottom-style: none;

border-bottom-style: dotted;

border-bottom-style: dashed;

border-bottom-style: solid;

border-bottom-style: groove;

border-bottom-style: inset;

<section>  <div>    This is a box with a border around it.  </div></section>

#example-element {  background-color: #eeeeee;  color: black;  border: 0.75em solid;  padding: 0.75em;  width: 80%;  height: 100px;}body {  background-color: white;}

Syntax

css

/* Keyword values */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;/* Global values */border-bottom-style: inherit;border-bottom-style: initial;border-bottom-style: revert;border-bottom-style: revert-layer;border-bottom-style: unset;

Theborder-bottom-style property is specified as a single<line-style> keyword value.

Formal definition

Initial value	`none`
Applies to	all elements. It also applies to`::first-letter`.
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

border-bottom-style =
<line-style>

<line-style> =
none|
hidden|
dotted|
dashed|
solid|
double|
groove|
ridge|
inset|
outset

Examples

Demonstrating all border styles

HTML

html

<table>  <tbody>    <tr>      <td>none</td>      <td>hidden</td>      <td>dotted</td>      <td>dashed</td>    </tr>    <tr>      <td>solid</td>      <td>double</td>      <td>groove</td>      <td>ridge</td>    </tr>    <tr>      <td>inset</td>      <td>outset</td>    </tr>  </tbody></table>

CSS

css

/* Define look of the table */table {  border-width: 3px;  background-color: #52e385;}tr,td {  padding: 3px;}/* border-bottom-style example classes */.b1 {  border-bottom-style: none;}.b2 {  border-bottom-style: hidden;}.b3 {  border-bottom-style: dotted;}.b4 {  border-bottom-style: dashed;}.b5 {  border-bottom-style: solid;}.b6 {  border-bottom-style: double;}.b7 {  border-bottom-style: groove;}.b8 {  border-bottom-style: ridge;}.b9 {  border-bottom-style: inset;}.b10 {  border-bottom-style: outset;}

Result

Specifications

Specification
CSS Backgrounds and Borders Module Level 3 # border-style

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified onNov 17, 2025 byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換