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