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 typediscrete
正规顺序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!

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.

See also