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;
The border-bottom-style
property is specified as a single keyword chosen from those available for the border-style
property.
<line-style>where
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Here is a table showing all of the values for border-bottom-style
<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>
/* 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;}
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 value | none |
---|---|
Applies to | all elements. It also applies to ::first-letter . |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1
|
5.5 | 9.2 | 1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | ? | Yes | Yes
|
Yes | Yes | ? |
border-left-style
, border-right-style
, border-top-style
, and border-style
.border-bottom
, border-bottom-color
, and border-bottom-width
.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style