The border-top-style
CSS property sets the line style of an element's top border
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
The specification doesn't define how borders of different styles connect in the corners.
Syntax
/* Keyword values */ border-top-style: none; border-top-style: hidden; border-top-style: dotted; border-top-style: dashed; border-top-style: solid; border-top-style: double; border-top-style: groove; border-top-style: ridge; border-top-style: inset; border-top-style: outset; /* Global values */ border-top-style: inherit; border-top-style: initial; border-top-style: unset;
The border-top-style
property is specified as a single keyword chosen from those available for the border-style
property.
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
<line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Examples
Setting border-top-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: 2px;
background-color: #52E385;
}
tr, td {
padding: 3px;
}
/* border-top-style example classes */
.b1 {border-top-style: none;}
.b2 {border-top-style: hidden;}
.b3 {border-top-style: dotted;}
.b4 {border-top-style: dashed;}
.b5 {border-top-style: solid;}
.b6 {border-top-style: double;}
.b7 {border-top-style: groove;}
.b8 {border-top-style: ridge;}
.b9 {border-top-style: inset;}
.b10 {border-top-style: outset;}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3The definition of 'border-top-style' in that specification. | Candidate Recommendation | No significant change. |
CSS Level 2 (Revision 1)The definition of 'border-top-style' in that specification. | Recommendation | Initial definition. |
Initial value | none
|
Applies to | all elements. It also applies to ::first-letter .
|
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
border-top-style
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox Full support 1 Full support 1 Notes' Prior to Firefox 50, border styles of rounded corners (with |
IE
Full support 5.5 |
Opera
Full support 9.2 |
Safari
Full support 1 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android Full support 4 Full support 4 Notes' Prior to Firefox 50, border styles of rounded corners (with |
Opera Android
Full support 14 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
- See implementation notes.'
- See implementation notes.
See also
- The other style-related border properties:
border-left-style
,border-right-style
,border-bottom-style
, andborder-style
. - The other top-border-related properties:
border-top
,border-top-color
, andborder-top-width
.
border-top-style by Mozilla Contributors is licensed under CC-BY-SA 2.5.