Our volunteers haven't translated this article into Tiếng Việt yet. Join us and help get the job done!
You can also read the article in English (US).

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

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

Syntax

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

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

Here is a table showing all of the values for 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
The definition of 'border-bottom-style' in that specification.
Candidate Recommendation No significant change.
CSS Level 2 (Revision 1)
The definition of 'border-bottom-style' in that specification.
Recommendation Initial definition.

Initial valuenone
Applies toall elements. It also applies to ::first-letter.
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid. This has been fixed in Firefox 50.
IE Full support 5.5Opera Full support 9.2Safari Full support 1WebView Android Full support YesChrome Android ? Edge Mobile Full support YesFirefox Android Full support Yes
Notes
Full support Yes
Notes
Notes Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid. This has been fixed in Firefox 50.
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

See also

Document Tags and Contributors

Cập nhật lần cuối bởi: ddbeck,