border-bottom-style

The border-bottom-style CSS property sets the line style of an element's bottom border.

/* 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: unset;

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

初始值	`none`
适用元素	all elements. It also applies to `::first-letter`.
是否是继承属性	否
适用媒体	visual
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

Syntax

The border-bottom-style property is specified as a single keyword chosen from those available for the border-style property.

Formal syntax

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

Examples

这是一种可显示border-bottom-style所有属性的标签。

HTML

<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>

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	Status	Comment
CSS Backgrounds and Borders Module Level 3 border-bottom-style	Candidate Recommendation	No significant change.
CSS Level 2 (Revision 1) border-bottom-style	Recommendation	Initial definition.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	(Yes)	1.0^[1]	5.5	9.2	1.0

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	(Yes)	(Yes)	(Yes)^[1]	7.0	(Yes)	(Yes)

[1] Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was&nbsolid. This has been fixed in Firefox 50.