CSS/Eigenschaften/border-style

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

Weblinks

| 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.