border-style

Übersicht

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

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: td style="vertical-align: middle;">Zeigt einen Rahmen an, der die Box so darstellt, als wäre sie eingelassen. Er ist das Gegenteil von outset. Auf eine Tabellenzelle mit border-collapse auf collapsed gesetzt angewendet, verhält sich dieser Wert wie groove.

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
outset		Zeigt einen Rahmen an, der die Box in 3D wie geprägt darstellt. Er ist das Gegenteil von outset. Auf eine Tabellenzelle mit border-collapse auf collapsed gesetzt angewendet, verhält sich dieser Wert wie ridge.

Formale Syntax

<br-style>{1,4}
wobei 
<br-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

Browser Kompatibilität

Siehe auch

• Die Rahmen-bezogenen Kurzschreibweise CSS Eigenschaften: border, border-width, border-color, border-radius