CSS/Eigenschaften/border-style

Die Eigenschaft border-style bestimmt alle Rahmenstile eines Elements. Sie ist die Kurzschreibform für die Werte border-top-style, border-right-style, border-bottom-style und border-left-style.

Erlaubte Werte

1 - 4 Schlüsselwörter

• none = kein Rahmen (bzw. unsichtbarer Rahmen).
• hidden = kein Rahmen (bzw. unsichtbarer Rahmen), gedacht für Tabellenzellen
• dotted = gepunktet.
• dashed = gestrichelt.
• solid = durchgezogen.
• double = doppelt durchgezogen.
• groove = 3D-Effekt.
• ridge = 3D-Effekt.
• inset = 3D-Effekt.
• outset = 3D-Effekt

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

none

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

Randlinien mit unterschiedlichen Stilen ansehen …

p {
  border-width: 1em; 
  border-color: red;
}

.gepunktet    {border-style: dotted;}
.gestrichelt  {border-style: dashed;}
.durchgezogen {border-style: solid;}
.doppelt      {border-style: double;}
.gerillt      {border-style: groove;}
.kammfoermig  {border-style: ridge;}
.inset        {border-style: inset;}
.outset       {border-style: outset;}

Die Absätze erhalten einen roten Rahmen. Die Klassen legen jeweils einen anderen Rahmenstil fest.

Beachte: Um unter Verwendung der Eigenschaft border-style für einzelne Seiten des Elements einen unterschiedlichen Rahmentyp zu bestimmen, sind folgende Regeln zu beachten:

• Eine Angabe: für alle 4 Rahmen gilt derselbe Wert
• Zwei Angaben: 1. Wert für oben und unten, 2. Wert für links und rechts
• Drei Angaben: 1. Wert für oben, 2. Wert für links und rechts, 3. Wert für unten
• Vier Angaben: 1. Wert für oben, 2. Wert für rechts, 3. Wert für unten, 4. Wert für links

Die Werte werden nicht durch Kommata getrennt.

Um den Elementen thead, tbody, tfoot oder tr einen sichtbaren Rahmen zuzuweisen, müssen die Rahmen innerhalb der Tabelle zusammenfallen (d. h. table { border-collapse: collapse; })

Empfehlung: Werden nur zwei oder drei Werte angegeben, so werden die fehlenden Werte von der gegenüberliegenden Seite übernommen. Nur ein angegebener Wert gilt für alle Seiten.

Siehe auch

• Rahmen und Ribbons

Weblinks

• Spezifikation (W3C): border-style
• MDN: border-style