PROFI-FOTOS-online.com - Der eigene Online-Shop für Profi-Fotografen - Einfach. Günstig. Fair.

CSS-Eigenschaft: border-style, Kategorien:  (allgemein), Rahmen (allgemein), Box model (CSS 2.1), Backgrounds and Borders (CSS 3)

Rahmendarstellung (allgemein)

Bestimmt den Rahmenstyle des Rahmens. Hat keinen Einfluss auf Stärke und Farbe des Rahmens.

CSS-Eigenschaft: border-style
KurzbeschreibungWerteStandardwertKategorieHinweis
Rahmendarstellung (allgemein)
  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
none
Allgemein:
inline-table
Rahmen
CSS 2.1:
Box model
CSS 3:
Backgrounds and Borders
 

Verwandte Eigenschaften aus der Kategorie:  (allgemein), Rahmen (allgemein), Box model (CSS 2.1), Backgrounds and Borders (CSS 3):

Folgendes ist beim Einsatz von border-style zu beachten:

  • Benötigt im Gegensatz zu border-width keine weitere Angabe einer Farbe oder Stärke des Rahmens. Wird nur border-style angegeben, wird als border-width der default-Wert medium, als border-color entweder eine geerbte Rahmenfarbe verwendet. Ist diese ebenfalls nicht gesetzt, wird die Schriftfarbe verwendet, die entweder dem Element selber oder einem Element in einer übergeordneten Ebene zugewiesen ist.
  • Ist die Kurzschreibweise für border-top-style, border-right-style, border-bottom-style und border-left-style.
  • In dieser Kurzschreibweise können 1 - 4 Werte angegeben werden. Die Parameter wirken in der Reichenfolge [oben][rechts][unten][links]. Oder einfacher zu merken, ab 12:00 Uhr im Uhrzeigersinn, also [12:00][3:00][6:00][9:00].
  • Werden keine 4 Parameter übergeben, wird der fehlende Style von der gegenüberliegenden Seite übernommen. Das heißt, fehlt die 4. Angabe für den linken Rahmen, wird der Style von rechts (2. Parameter) übernommen, fehlt auch der 3. Parameter für unten, wird der Style von oben (1. Parameter) übernommen. Die Angabe von nur einem Parameter bestimmt den Style von allen Seiten.
  • Ist gleichzeitig ein Parameter in der Kurzschreibweise border, dort kann allerdings nur ein Rahmenstyle für alle vier Seiten vergeben werden.
  • Aus Sicht der Barrierefreiheit ist anzumerken, dass Rahmen nicht ausschließlich zum optischen "Aufhübschen" dienen, sondern auch bei abgeschalteten Farben im Browser erhalten blieben - ohne Farbe - aber einer Seite eine gute optische Struktur geben können.
  • Die Vielfalt des border-style erinnert stark an das Webdesign der 80er. In der Praxis sieht man heute vor allem solid, außerdem noch dotted und dashed als Variationen. Die anderen Variationen kann man vernachlässigen. Ich wüßte nicht, wann ich diese im produktiven Einsatz gesehen hätte.
  • CSS 3 sieht in Zukunft weitreichende Möglichkeiten, Grafiken für border einzusetzen. Erklärungen hierzu folgen an geeigneter Stelle.
Browserunterstützung von border-style
Firefox
Firefox		Google Chrome
Google
Chrome		Internet Explorer
Internet
Explorer		Safari
Safari		Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu border-style:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    border-spacing


Beispiele

HTML:

<div>Die generelle Box, die bei allen Beispielen gleich ist. Ebenfalls ein paar generelle CSS-Anweisungen, die in den unterschiedlichen Beispielen eingesetzt werden.</div>

CSS:

div {
   padding: 30px;
   font-size: 20px;
   background-color: #eeeeee;
   border-width: 16px;
   border-color: #a00;
}
.onePX {
   border-width: 1px;
}
.onePX2 {
   border-width: 2px;
}
.onePX3 {
   border-width: 3px;
}
.onePX4 {
   border-width: 4px;
}

Beispiel Nr. 1 So sieht's aus:

Die generelle Box, die bei allen Beispielen gleich ist. Ebenfalls ein paar generelle CSS-Anweisungen, die in den unterschiedlichen Beispielen eingesetzt werden.
 

HTML:

<div class="doDashed">dashed</div>

CSS:

.doDashed {
   border-style: dashed;
}

Beispiel Nr. 2 So sieht's aus:

dashed
 

HTML:

<div class="doDashed onePX4">dashed</div>

CSS:

/* Hier wird über eine Klasse die Stärke der Linie verändert, was im Gegensatz zum Beispiel davor zu einem anschaulicherem Ergebnis führt. */

Beispiel Nr. 3 So sieht's aus:

dashed
 

HTML:

<div class="doDotted">dotted</div>

CSS:

.doDotted {
   border-style: dotted;
}
/* Gerade die Darstellung der Ecken variiert stark in den unterschiedlichen Browsern. */

Beispiel Nr. 4 So sieht's aus:

dotted
 

HTML:

<div class="doDotted onePX4">dotted</div>

CSS:

/* Hier wird über eine Klasse die Stärke der Linie verändert. */

Beispiel Nr. 5 So sieht's aus:

dotted
 

HTML:

<div class="doDouble">double</div>

CSS:

.doDouble {
   border-style: double;
}

Beispiel Nr. 6 So sieht's aus:

double
 

HTML:

<div class="doDouble onePX">double</div>

CSS:

/* Wird der Parameter "double" mit der Rahmenbreite 1px kombiniert, fällt die doppelte Linie zusammen und sieht aus, als ob sie "solid" wäre */

Beispiel Nr. 7 So sieht's aus:

double
 

HTML:

<div class="doDouble onePX2">double</div>

CSS:

/* Wird der Parameter "double" mit der Rahmenbreite 2px kombiniert, fällt die doppelte Linie zusammen, uns sieht ebenfalls aus, als ob sie "solid" mit einer Stärke von 2px wäre */

Beispiel Nr. 8 So sieht's aus:

double
 

HTML:

<div class="doDouble onePX3">double</div>

CSS:

/* Wird der Parameter "double" mit der Rahmenbreite 3px kombiniert, wird für Innen- und Außenlinie 1px vergeben, sowie 1px für den Abstand dazwischen. Wird die Stärke größer, wird immer ein gleiches Verhältnis von den Außenlinien und Platz dazwischen dargestellt. */

Beispiel Nr. 9 So sieht's aus:

double
 

HTML:

<div class="doGroove">groove</div>

CSS:

.doGroove {
   border-style: groove;
}

Beispiel Nr. 10 So sieht's aus:

groove
 

HTML:

<div class="doGroove onePX">groove</div>

CSS:

/* Wird der Parameter "groove" mit der Rahmenbreite 1px kombiniert, fällt die doppelte Linie in sich zusammen und sieht aus, als ob sie "solid" wäre */

Beispiel Nr. 11 So sieht's aus:

groove
 

HTML:

<div class="doHidden">hidden</div>

CSS:

.doHidden {
   border-style: hidden;
}
/* Man sieht, man sieht nichts. Sinnvoll einzusetzen, falls eine Rahmen geerbt wurde.
In der Praxis sieht man eher border: 0px; */

Beispiel Nr. 12 So sieht's aus:

hidden
 

HTML:

<div class="doInset">inset</div>

CSS:

.doInset {
   border-style: inset;
}

Beispiel Nr. 13 So sieht's aus:

inset
 

HTML:

<div class="doInset onePX">inset</div>

CSS:

/* inset mit der Rahmenstärke 1px.
Die beiden Farben des Rahmen bleiben erkennbar. */

Beispiel Nr. 14 So sieht's aus:

inset
 

HTML:

<div class="doNone">none</div>

CSS:

.doNone {
   border-style: none;
}
/* Kein Unterschied zu hidden */

Beispiel Nr. 15 So sieht's aus:

none
 

HTML:

<div class="doOutset">outset</div>

CSS:

.doOutset {
   border-style: outset;
}

Beispiel Nr. 16 So sieht's aus:

outset
 

HTML:

<div class="doOutset onePX">outset</div>

CSS:

/* outset mit der Rahmenstärke 1px.
Die beiden Farben des Rahmen bleiben erkennbar. */

Beispiel Nr. 17 So sieht's aus:

outset
 

HTML:

<div class="doRidge">ridge</div>

CSS:

.doRidge {
   border-style: ridge;
}

Beispiel Nr. 18 So sieht's aus:

ridge
 

HTML:

<div class="doRidge onePX">ridge</div>

CSS:

/* Wird der Parameter ridge mit der Rahmenbreite 1px kombiniert, fällt die doppelte Linie zusammen und sieht aus, als ob sie "solid" wäre */

Beispiel Nr. 19 So sieht's aus:

ridge
 

HTML:

<div class="doSolid onePX4">solid</div>

CSS:

.doSolid {
   border-style: solid;
}

Beispiel Nr. 20 So sieht's aus:

solid
 

HTML:

<div class="doSolid">solid</div>

CSS:

/* Solid mit der im Beispiel Nr. 1 definieren Breite. */

Beispiel Nr. 21 So sieht's aus:

solid
 

HTML:

<div class="doMix2">mit zwei Angaben</div>

CSS:

.doMix2 {
   border-style: solid double;
}
/* Beipspiel mit zwei Angaben zum Style. Unten übernimmt den Style von oben, links den Style von rechts.
Bei allen durchgehenden Rahmenlinien wird deutlich, wie die Ecken auf einander stoßen. Der Schräge Übergang wird von vielen als störend erlebt. */

Beispiel Nr. 22 So sieht's aus:

mit zwei Angaben
 

HTML:

<div class="doMix3">mit drei Angaben</div>

CSS:

.doMix3 {
   border-style: solid ridge double;
}
/* Ohne vierten Parameter übernimt der linke Rahmen ebenfalls den Style von rechts. */

Beispiel Nr. 23 So sieht's aus:

mit drei Angaben
 

HTML:

<div class="doMix4">mit vier Angaben</div>

CSS:

.doMix4 {
   border-style: solid groove dotted double;
}
/* Eine vollständige Angabe von vier Werten in der Kurzschreibweise. Nun, hübsch ist anders... */

Beispiel Nr. 24 So sieht's aus:

mit vier Angaben
 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 28. 08. 2022
Render Time: 0.692 sec.