CSS: Rahmengestaltung mit »border«
1) Die Kurzschrift-Eigenschaft beschreibt Breite, Rahmenstil und Farbe:
border [border-width] [border-style] [border-color] | inherit
Mögliche Werte für die Eigenschaften siehe bei den Beschreibungen unten. Startwerte der Eigenschaften sind bei den Kurzschrift-Varianten nicht definiert. Sicherheitshalber sollten alle drei Eigenschaften bei der Kurzform gesetzt werden.
:::BEISPIEL 1: Einfacher Kasten mit Rahmen
.box {
width: 200px;
height: 150px;
background-color: #FC9;
border: 2px solid red;
}
2) Unterschiedliche Rahmenstärken. Statt der ausfürlichen Schreibweise für jede Rahmenseite (wie im Beispiel) kann auch die Kurzform benutzt werden:
border-width: 2px 4px 12px 4px;
:::BEISPIEL 2: Kasten mit unterschiedlichen Rahmenstärken und -stilen
.box {
width: 200px;
height: 150px;
color: red; /* Da border-color nicht angegeben, */
/* setzt color die Rahmenfarbe */
background-color: #FC9;
border-style: dotted; /* Stil für alle Seiten */
/* muss gesetzt sein, */
/* sonst wird kein Rahmen angezeigt */
border-bottom-style: solid; /* Stil Rahmen unten */
border-top-width: 2px; /* Stärke oben */
border-right-width: 4px; /* Stärke rechts */
border-bottom-width: 12px; /* Stärke unten */
border-left-width: 4px; /* Stärke links */
}
Die border-Eigenschaften werden nicht automatisch vererbt; durch explizites Setzen von inherit können Kind-Elemente die Eigenschaften erben.
Die Eigenschaften für den Rahmen können für jede Seite (oben, rechts, unten, links) getrennt angegeben werden:
| Eigenschaft | Beschreibung | Werte |
|---|---|---|
| border | Rahmen | [border-width] [border-style] [border-color] |
| border-width | Rahmenstärke | thin, medium, thick, inherit, [Stärke] |
| border-style | Rahmenstil | none, dotted, dashed, solid, double, groove, ridge, inset, inherit |
| border-color | Rahmenfarbe | [Farbangabe] |
| border-top | Rahmen oben | [border-top-width] [border-top-style] [border-top-color] |
| border-right | Rahmen rechts | [border-right-width] [border-rightstyle] [border-right-color] |
| border-bottom | Rahmen unten | [border-bottom-width] [border-bottom-style] [border-bottom-color] |
| border-left | Rahmen links | [border-left-width] [border-left-style] [border-left-color] |
| border-top-width | Rahmenstärke oben | thin, medium, thick, inherit, [Stärkeangabe] |
| border-right-width | Rahmenstärke rechts | thin, medium, thick, inherit, [Stärkeangabe] |
| border-bottom-width | Rahmenstärke unten | thin, medium, thick, inherit, [Stärkeangabe] |
| border-left-width | Rahmenstärke links | thin, medium, thick, inherit, [Stärkeangabe] |
| border-top-style | Rahmenstil oben | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit |
| border-right-style | Rahmenstil rechts | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit |
| border-bottom-style | Rahmenstil unten | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit |
| border-left-style | Rahmenstil links | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit |
| border-top-color | Rahmenfarbe oben | [Farbangabe], transparent, inherit, color-Wert |
| border-right-color | Rahmenfarbe rechts | [Farbangabe], transparent, inherit, color-Wert |
| border-bottom-color | Rahmenfarbe unten | [Farbangabe], transparent, inherit, color-Wert |
| border-left-color | Rahmenfarbe links | [Farbangabe], transparent, inherit, color-Wert |
CSS3: Runde Ecken mit border-radius
Als Werte können Pixel-, Prozent- und em-Angaben dienen. Prozentangaben beziehen sich auf die Größe des zu rundenden Elements. Die Eigenschaften können mit 1 bis 4 Werten ausgestattet werden, s. Beispiele.
Beispiele gestestet in Firefox (6+), Chrome (12+), Internet Explorer (9+).
3) Gleichmäßige Eckenrundung
:::BEISPIEL 3: Gleichmäßige Eckenrundung
.box {
padding: 0.5em; /* damit der Text etwas vom Rand abrückt */
width: 200px;
height: 150px;
background-color: #FC9;
border: 2px solid #000;
border-radius: 10px; /* alle 4 Ecken gerundet */
}
3a) Gleichmäßige Eckenrundung für Fotos: Rahmenstärke im Beispiel: Null! Die CSS-Stildefinitionen müssen direkt mit dem img-Tag verknüpft sein. Die Eckenrundung eines Eltern-Elementes (z.B. div) nützt nichts. Für Background-Images siehe weiter unten.
:::BEISPIEL 3a: Gleichmäßige Eckenrundung für Bilder
.image_rundung {
border: 0;
border-radius: 10px; /* alle 4 Ecken gerundet */
}
3b) Kreis: Der Außendurchmesser beträgt 2x Rahmenstärke + 2x Padding-Wert + 1x Breite = 204px. Mit einen Radius-Wert von 50% wird immer eine Kreisform erreicht.
:::BEISPIEL 3b: Spezialfall Kreis
.box {
padding: 25px; /* damit der Text etwas vom Rand abrückt */
width: 150px;
height: 150px;
background-color: #3CF;
border: 2px solid #000;
border-radius: 50%; /* alle 4 Ecken zum Kreis gerundet */
}
3c) Kreis mit unterschiedlich eingefärbten Bogenabschnitten
:::BEISPIEL 3b: Kreis mit verschieden eingefärbten Bogenabschnitten
.box {
padding: 25px;
width: 100px;
height: 100px;
background-color: #FC9;
border: 20px solid #000 /* Rahmenfarbe Schwarz */
border-color: red green blue gray; /* Rahmenfarbe neu in der Reihenfolge */
/* oben, rechts, unten, links */
border-radius: 50%; /* alle 4 Ecken zum Kreis gerundet */
}
4) Bisymmetrische Rundung: Bei Angabe von zwei Werten bezieht sich der erste auf die linke obere und die rechte untere Ecke, der zweite auf die rechte obere und linke untere Ecke. Das funktioniert auch sehr gut mit Fotos im Hintergrund (background).
:::BEISPIEL 4: Bisymmetrische Eckenrundung
.box {
padding: 3px;
width: 200px;
height: 150px;
background: #3CF url(../images/bulli.png) no-repeat;
border: 2px solid #000;
border-radius: 8px 25px; /* 1. Wert für links oben und rechts unten */
/* 2. Wert für rechts oben und links unten */
}
4a) Asymmerische Eckenrundung: Mischung der Werte-Einheiten ist möglich: Der Radius für die linke untere Ecke ist in Prozent angegeben.
:::BEISPIEL 4a: Asymmetrische Eckenrundung
.box {
padding: 3px;
width: 200px;
height: 150px;
background-color: #FC9;
border: 2px solid #000;
border-radius: 8px 0px 25px 50%; /* 4 Werte für links oben, rechts oben */
/* und rechts unten und links unten */
}
| Eigenschaft | Beschreibung | Werte |
|---|---|---|
| border-radius | Rahmen m. runden Ecken | [Radius] alle 4 Ecken gleichmäßig |
| border-radius | Rahmen m. runden Ecken | [Radius] [Radius] Rundung links oben, rechts unten |
| border-radius | Rahmen m. runden Ecken | [Radius] [Radius] [Radius] [Radius] Einzelangaben für jede Ecke, im Uhrzeigersinn beginnend links oben |
| border-top-left-radius | Rundung links oben | [Radius] nur diese Ecke betreffend |
| border-top-right-radius | Rundung rechts oben | dto. |
| border-bottom-right-radius | Rundung rechts unten | dto. |
| border-bottom-left-radius | Rundung links unten | dto. |
update: 2011-09-04 | 2011-08-10