CSS border-stil Eigenschaft

Definition und Verwendung

Die border-style-Eigenschaft wird verwendet, um den Stil aller Kanten eines Elements zu setzen oder den Stil der Kanten einzeln zu konfigurieren.

Die Kante kann nur auftreten, wenn dieser Wert nicht 'none' ist.

Beispiel 1

border-style:dotted solid double dashed;
  • Die obere Kante ist gepunktet
  • Die rechte Kante ist durchgezogen
  • Die untere Kante ist doppelt gestrichelt
  • Die linke Kante ist gestrichelt

Beispiel 2

border-style:dotted solid double;
  • Die obere Kante ist gepunktet
  • Die rechte und linke Kante sind durchgezogen
  • Die untere Kante ist doppelt gestrichelt

Beispiel 3

border-style:dotted solid;
  • Die obere und untere Kante sind gepunktet
  • Die rechte und linke Kante sind durchgezogen

Beispiel 4

border-style:dotted;
  • Alle 4 Kanten sind gepunktet

Weitere Informationen:

CSS-Tutorial:CSS Rand

HTML DOM Referenzhandbuch:borderStyle-Attribut

Beispiel

Stellen Sie die Stile der 4 Rahmen ein:

p
  {
  border-style:solid;
  }

Selbst ausprobieren

CSS-Syntax

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Attributwerte

Werte Beschreibung
none Definiert einen Rahmen ohne Rahmen.
hidden Gleicher als "none", außer wenn es auf Tabellen angewendet wird. Für Tabellen wird "hidden" verwendet, um Rahmenkonflikte zu lösen.
dotted Definiert einen gepunkteten Rahmen. In den meisten Browsern wird er als dicke Linie dargestellt.
dashed Definiert eine gestrichelte Linie. In den meisten Browsern wird sie als dicke Linie dargestellt.
solid Definiert eine dicke Linie.
double Definiert eine doppelte Linie. Die Breite der Linie entspricht dem Wert von border-width.
groove Definiert einen 3D-grooved Rahmen. Sein Effekt hängt vom Wert von border-color ab.
ridge Definiert einen 3D-grooved Rahmen. Sein Effekt hängt vom Wert von border-color ab.
inset Definiert einen 3D-inset Rahmen. Sein Effekt hängt vom Wert von border-color ab.
outset Definiert einen 3D-outset Rahmen. Sein Effekt hängt vom Wert von border-color ab.
inherit Vorgeschrieben, dass die Rahmenstil von dem Elternelement geerbt wird.

Beschreibung

Der am wenigsten vorhersehbare Rahmenstil ist double. Er wird definiert als die Breite der beiden Linien plus der Raum zwischen ihnen, der dem Wert von border-width entspricht. Allerdings gibt die CSS-Norm nicht an, ob eine der Linien breiter als die andere ist oder ob beide Linien die gleiche Breite haben sollten, sowie ob der Raum zwischen den Linien breiter als die Linien sein sollte. All dies wird vom Benutzeragenten entschieden, und der Künstler hat darauf keinen Einfluss.

Technische Details

Standardwert: nicht spezifiziert
Vererbbarkeit: nein
Version: CSS1
JavaScript-Syntax: object.style.borderStyle="dotted double"

Mehr Beispiele

Stilisierung der vier Rahmen einstellen
Dieses Beispiel zeigt, wie man die Stilisierung der vier Rahmen einstellt.
Unterschiedliche Rahmen an jeder Seite einstellen
Dieses Beispiel zeigt, wie man unterschiedliche Rahmen an den Seiten eines Elements einstellt.

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die diese Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5