Stil mit {stil}

Jan 2009

Border – Stile für die Gestaltung des Rahmens

Schema für border, padding und margin

CSS stellt eine Auswahl von verschiedenen Rahmen zur Verfügung, die vom einfachen farbigen Rahmen bis zu schattierten Variationen von Rahmen reicht.

Der Stil für den Rahmen ist nicht erblich, so dass Elemente, die innerhalb eines HTML-Elements liegen, für das ein Rahmen definiert wurde, keinen Rahmen zeigen.

border-top-style | border-right-style | border-bottom-style | border-left-style

IE4+ M1 N6 O5+ Version: CSS2 Erblich: Nein

border-top-style

Darstellung der oberen Rahmenlinie

border-right-style

Darstellung der rechten Rahmenlinie

border-bottom-style

Darstellung der unteren Rahmenlinie

border-left-style

Darstellung der linken Rahmenlinie

Werte

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

none

Voreinstellung. Die explizite Angabe von none stellt sicher, dass vorangegangene Deklarationen ausgeschaltet sind.

hidden

funktioniert wie none und verhindert Konflikte, wenn verschiedene Rahmen aufeinander treffen. Da Internet Explorer den Wert hidden nicht unterstützt, wird in der Praxis der Wert none benutzt.

dotted

erzeugt eine gepunktete Linie.

dashed

erzeugt eine gestrichelte Linie.

solid

erzeugt eine durchgezogene Linie.

double

erzeugt eine doppelte durchgehende Linie, die insgesamt so breit ist, wie in border-width angegeben.

groove

erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.

ridge

erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.

inset

erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.

outset

erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.

Kurzschrift: border-style

IE4+ M1 N4+ O5 S1 CSS1 Erblich: Nein

border-style

border-style bestimmt den Stil aller vier Rahmenseiten.

Werte

[ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] {1,4}

{1,4} Sie können eine, zwei, drei oder vier Stile angeben:

• Ein Stil legt fest, dass alle vier Rahmenseiten in diesem Stil dargestellt werden.
• Zwei Stile legen fest, dass die obere und untere Rahmenseite mit der ersten Angabe und die rechte und linke Rahmenseite im zweiten Stil dargestellt.
• Drei Stile legen fest, dass die obere Rahmenseite mit dem ersten, die rechte und linke Rahmenseite mit dem zweiten und die untere Rahmenseite mit dem dritten Stil dargestellt.
• Vier Stile legen die Reihenfolge top, right, bottom, left fest.

Beispiel: Rahmen um einem Textabsatz legen

p.rahmen {
  border-color: red silver cyan blue;
  border-style: solid dashed dotted outset;
  border-width: 15px 10px 15px 10px;
}

Darstellung

Ein Textabsatz in einem Rahmen

zurück zum Seitenanfang