border-style

Übersicht

Die Eigemschaft border-style ist eine Kurzform zur Angabe der Werte für border-top-style, border-right-style, border-bottom-style und border-left-style.

Standardwert

none

Anwendbar auf

Alle Elemente

Geerbt

Nein

Medium

visual

Werte

hidden, dashed, dotted, double, groove, inset, outset, ridge, solid, none, inherit

Syntax

border-style: [ hidden | dashed | dotted | double | groove | inset | outset | ridge | solid | none ]{1,4} | inherit

Werte

hidden

Der Rahmen wird versteckt

dashed

Der Rahmen wird gestrichelt

dotted

Der Rahmen wird gepunktet

double

Ein doppelter, durchgezogener Rahmen

groove

Der Rahmen wirkt wie ein Graben

inset

Lässt das Element aussehen, als würde es tiefer liegen

outset

Lässt das Element aussehen, als würde es höher liegen (3D-Effekt)

ridge

Der Rahmen wirkt wie ein Hügel

solid

Durchgezogener Rahmen

none

Kein Rahmen, die Breite des Rahmens wird auf 0 gesetzt

inherit

der Browser verwendet den Wert des Elternelements.

1 Wert

gilt für border-top-style, border-right-style, border-bottom-style und border-left-style

2 Werte

der erste Wert gilt für border-top-style und border-bottom-style, der zweite für border-right-style und border-left-style

3 Werte

der erste Wert gilt für border-top-style, der zweite für border-right-style und border-left-style und der dritte für border-bottom-style

4 Werte

der erste Wert gilt für border-top-style, der zweite für border-right-style, der dritte für border-bottom-style und der vierte für border-left-style

Beispiele

border-style:solid

border-style:dashed

border-style:dotted

border-style:double

border-style:groove

border-style:inset

border-style:outset

border-style:ridge

Browser-Kompatibilität