Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
border-top-style
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Dieborder-top-styleCSS Eigenschaft legt den Linienstil des oberenborder eines Elements fest.
Hinweis:Die Spezifikation definiert nicht, wie Kanten verschiedener Stile in den Ecken verbunden werden.
Probieren Sie es aus
border-top-style: none;border-top-style: dotted;border-top-style: dashed;border-top-style: solid;border-top-style: groove;border-top-style: inset;<section> <div> This is a box with a border around it. </div></section>#example-element { background-color: #eeeeee; color: black; border: 0.75em solid; padding: 0.75em; width: 80%; height: 100px;}body { background-color: white;}Syntax
css
/* 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: revert;border-top-style: revert-layer;border-top-style: unset;Die Eigenschaftborder-top-style wird als einzelnes<line-style> Schlüsselwort festgelegt.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | alle Elemente. Auch anwendbar auf::first-letter. |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
border-top-style =
<line-style>
<line-style> =
none|
hidden|
dotted|
dashed|
solid|
double|
groove|
ridge|
inset|
outset
Beispiele
Einstellung von border-top-style
HTML
html
<table> <tbody> <tr> <td>none</td> <td>hidden</td> <td>dotted</td> <td>dashed</td> </tr> <tr> <td>solid</td> <td>double</td> <td>groove</td> <td>ridge</td> </tr> <tr> <td>inset</td> <td>outset</td> </tr> </tbody></table>CSS
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;}Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-style |
Browser-Kompatibilität
Siehe auch
- Die anderen stilbezogenen Rahmen-Eigenschaften:
border-left-style,border-right-style,border-bottom-style, undborder-style. - Die anderen Rahmen oben bezogenen Eigenschaften:
border-top,border-top-color, undborder-top-width.