我们的志愿者还没有将这篇文章翻译为 中文 (简体)加入我们帮助完成翻译
您也可以阅读此文章的English (US)版。

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

Note: 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 syntax

<line-style>

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

Examples

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 3
The 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 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 AndroidiOS SafariSamsung 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-top-style was solid. This has been fixed in Firefox 50.
IE Full support 5.5Opera Full support 9.2Safari Full support 1WebView Android ? Chrome 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-top-style was solid. This has been fixed in Firefox 50.
Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

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

See also

文档标签和贡献者

最后编辑者: ddbeck,