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

Beispiel 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;}

Siehe auch

• CSS/Tutorials/Boxmodell/Rahmen

Weblinks

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

| BeispielText = Alle div-Elemente erhalten einen durchgehenden oberen und unteren Rahmen sowie einen gepunkteten linken und rechten Rahmen.
| Hinweis = 

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

Beachten Sie: Die Werte werden nicht durch Kommata getrennt.