border-style

├ťbersicht

Die border-style CSS Eigenschaft ist eine Kurzschreibweise zum Setzen des Linienstils f├╝r alle vier Seiten des Elementrands.

Hinweis: Der Standardwert von border-style ist none. Das bedeutet, falls die border-width und die border-color ge├Ąndert werden, wird der Rand nicht angezeigt, solange diese Eigenschaft nicht auf etwas anderes als none oder hidden gesetzt wird.
Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter.
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypdiskret

Syntax

/* Auf alle vier Seiten anwenden */
border-style: dashed;

/* horizontal | vertikal */
border-style: dotted solid;

/* open | horizontal | vertikal */
border-style: hidden double dashed;

/* open | rechts | unten | links */
border-style: none solid dotted dashed;

/* Global values */
border-style: inherit;
border-style: initial;
border-style: unset;

Werte

<br-style>
Ist ein Schl├╝sselwort, das den Stil des unteren Rahmens beschreibt. Es kann die folgenden Werte annehmen:
none
Wie beim hidden Schl├╝sselwort wird kein Rahmen angezeigt. In diesem Fall sind die berechneten Werte von border-width 0, au├čer ein Hintergrundbild ist gesetzt, auch wenn die Eigenschaft anders gesetzt wurde. Im Fall von Zusammenfallen von Tabellenzellen und Rahmen hat der none Wert die niedrigste Priorit├Ąt: Das bedeutet, dass falls irgendein anderer, gegens├Ątzlicher Rahmen gesetzt ist, wird er angezeigt.
hidden
Wie beim none Schl├╝sselwort wird kein Rahmen angezeigt. In diesem Fall sind die berechneten Werte von border-width 0, au├čer ein Hintergrundbild ist gesetzt, auch wenn die Eigenschaft anders gesetzt wurde. Im Fall von Zusammenfallen von Tabellenzellen und Rahmen hat der hidden Wert die h├Âchste Priorit├Ąt: Das bedeutet, dass falls irgendein anderer, gegens├Ątzlicher Rahmen gesetzt ist, wird er nicht angezeigt.
dotted
Zeigt eine Reihe von runden Punkten an. Die Abst├Ąnde der Punkte werden nicht durch die Spezifikation bestimmt und sind implementationsspezifisch. Der Radius der Punkte ist die halbe border-width.
dashed
Zeigt eine Reihe von kurzen Strichen mit quadratischen Enden oder Liniensegmenten an. Die exakte Gr├Â├če und L├Ąnger der Segmente werden nicht durch die Spezifikation bestimmt und sind implementationsspezifisch.
solid
Zeigt eine einfache, gerade, ausgef├╝llte Linie an.
double
Zeigt zwei gerade Linien an, die zum Pixelwert hinzugef├╝gt werden, der durch border-width definiert wird.
groove
Zeigt einen Rahmen an, der zu einem eingeritzten Effekt f├╝hrt. Er ist das Gegenteil von ridge.
ridge
Zeigt einen Rahmen mit einem 3D-Effekt an, so als ob es aus der Seite herauskommt. Er ist das Gegenteil von groove.
inset
Zeigt einen Rahmen an, der die Box so darstellt, als w├Ąre sie eingelassen. Es ist das Gegenteil von outset. Auf eine Tabellenzelle mit border-collapse auf collapsed gesetzt angewendet, verh├Ąlt sich dieser Wert wie groove.
outset

Zeigt einen Rahmen an, der die Box in 3D wie gepr├Ągt darstellt. Es ist das Gegenteil von inset. Auf eine Tabellenzelle mit border-collapse auf collapsed gesetzt angewendet, verh├Ąlt sich dieser Wert wie ridge.

Formale Syntax

<line-style>{1,4}

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

Beispiele

Tabelle mit allen Eigenschaftswerten

Hier ist ein Beispiel aller Eigenschaftswerte.

HTML Inhalt

<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 Inhalt

/* Definiert das Aussehen der Tabelle */
table {
  border-width: 3px;
  background-color: #52E396;
}

tr, td {
  padding: 2px;
}

/* border-style Beispielklassen */
.b1 { border-style: none; }
.b2 { border-style: hidden; }
.b3 { border-style: dotted; }
.b4 { border-style: dashed; }
.b5 { border-style: solid; }
.b6 { border-style: double; }
.b7 { border-style: groove; }
.b8 { border-style: ridge; }
.b9 { border-style: inset; }
.b10  { border-style: outset; }

Ausgabe

Spezifikationen

Spezifikation Status Kommentar
CSS Backgrounds and Borders Module Level 3
Die Definition von 'border-style' in dieser Spezifikation.
Anw├Ąrter Empfehlung Keine ├änderung
CSS Level 2 (Revision 1)
Die Definition von 'border-style' in dieser Spezifikation.
Empfehlung 2-, 3- und 4-Wert-Syntaxen hinzugef├╝gt
CSS Level 1
Die Definition von 'border-style' in dieser Spezifikation.
Empfehlung Urspr├╝ngliche Definition

Browser Kompatibilit├Ąt

BCD tables only load in the browser

Siehe auch