Ü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
Medienvisuell
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

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

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

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
Grundlegende Unterstützung 1.0 1.0 (1.7 oder früher) 4.0 3.5 1.0
Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung 2.6 1.0 (1.9.2) 7.0 (Ja) 3.0

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: serv-inc, Sebastianz, fscholz, SJW, Yuichiro, Michael2402
 Zuletzt aktualisiert von: serv-inc,