CSS/Eigenschaften/äußere Gestaltung/Rahmen/border-radius

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften‎ | äußere Gestaltung‎ | Rahmen(Weitergeleitet von Border-radius)
Wechseln zu: Navigation, Suche

Sie können für ein Element mit der Eigenschaft border-radius den Radius bestimmen, mit dem die Ecken abgerundet werden. In Verbindung mit Rahmendicke, Rahmentyp und Rahmenfarbe wird eine entsprechende abgerundete Rahmenlinie gezeichnet. Der Hintergrund des Elements wird entlang der Kurve abgeschnitten, auch wenn keine sichtbare Rahmenlinie vorhanden ist.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • CSS 3.0

Mögliche Werte:

  • 1-4 Längenangaben oder Prozentwerte, es sind auch Wertepaare möglich

Anwendungsbeispiele[Bearbeiten]

alle Ecken eines Elements[Bearbeiten]

Beispiel: ein Wert für alle Ecken ansehen …
#rund1 {
  border-radius: 1em;
}

#rund2 {
  border-radius: 1em;
  border: 0;
  background: red;
}

#rund3 {
  border-radius: 4em/1em;
}

#rund4 {
  border-radius: 50%;
  width: 6em;
  height: 6em;
}
Ein div erhält über seine id-Selektoren jeweils unterschiedliche CSS-Festlegungen:
  • Box 1 erhält einen Radius von 1em
  • Box 2 hat den gleichen Radius, aber durch border: 0; keine Randlinie, dafür aber einen roten Hintergrund, der entlang des Radius abgeschnitten wird.
  • Box 3 erhält als Radius ein Wertepaar border-radius: 4em/1em;
  • Box 4 erhält als Radius ein Wertepaar border-radius: 10%/10%;
  • Box 5 erhält als Radius ein Wertepaar border-radius: 40%/40%;
    Diese abgerundeten Ecken sind nicht gleichmäßig, da die Prozentzahlen sich auf die unterscheidliche Breite und Höhe des Elements beziehen.
  • Box 6 ist kreisrund, da der Radius 50% der (gleichgroßen) Höhe und Breite beträgt.

Die Angabe eines Wertepaares erzeugt eine elliptische Abrundung, wobei der erste Wert für die horizontale und der zweite Wert für die vertikale Halbachse steht. Eine Prozent-Angabe für die horizontale Halbachse bezieht sich auf die halbe Breite des Elements, eine Prozent-Angabe für die vertikale Halbachse auf die halbe Höhe. Wird nur ein Wert angegeben, so entsteht eine kreisförmige Abrundung. border-radius: 1em; ist identisch zu border-radius: 1em/1em;

einzelne Ecken eines Elements[Bearbeiten]

Um für einzelne Seiten des Elements mit der Eigenschaft border-radius eine unterschiedliche Rahmendicke zu bestimmen, beachten Sie folgende Regeln:

  • Eine Angabe: derselbe Wert gilt für alle vier Ecken
  • Zwei Angaben: 1. Wert für oben-links und unten-rechts, 2. Wert für oben-rechts und unten-links
  • Drei Angaben: 1. Wert für oben-links, 2. Wert für oben-rechts und unten-links, 3. Wert für unten-rechts
  • 'Vier' Angaben: 1. Wert für oben-links, 2. Wert für oben-rechts, 3. Wert für unten-rechts, 4. Wert für unten-links
Beachten Sie: Die Werte werden nicht durch Kommata getrennt.

Außerdem können Sie entsprechende Werte für

  • border-top-right-radius, definiert die Abrundung für oben rechts,
  • border-bottom-right-radius, die Abrundung für unten rechts,
  • border-bottom-left-radius, die Abrundung für unten links und
  • border-top-left-radius, die Abrundung für oben links

angeben.

Beispiel: Werte für einzelne Ecken ansehen …
#rund1 {
  border-radius: 1em 3em;
}

#rund2 {
  border-radius: 1em 2em 3em 4em;
}

#rund3 {
  border-radius: 0 1em 2em;
}

h1 {
 height:2em;
 text-align: center;
 background-image: linear-gradient(yellow, orange, red);
 border-bottom-left-radius: 10% 50%;
 border-bottom-right-radius: 10% 50%;
}
Ein div erhält über seine id-Selektoren jeweils unterschiedliche CSS-Festlegungen:
  • Box 1 erhält zwei Werte:
    • 1em-Radius links-oben und rechts-unten
    • 3em-Radius rechts-oben und gegenüber
  • Box 2 hat 4 Werte für die Ecken im Uhrzeigersinn von links oben ausgehend
  • Box 3 hat 3 Werte
    • der 1. Wert entspricht links oben
    • der 2. Wert rechts oben
    • der 3. Wert rechts unten
    • da kein 4. Wert festgelegt ist, erhält die linke, untere Ecke den 2. Wert der gegenüberliegenden Ecke zugewiesen


Auch die h1-Überschrift erhält in den linken unteren und rechten unteren Ecken einen Radius.

geometrische Formen[Bearbeiten]

Mit border-radius sind auch geometrische Formen möglich:

Beispiel: Werte für einzelne Ecken ansehen …
#rund {
  border-radius: 50%;
  width: 6em;
  height: 6em;
}

#rund8 {
  border-radius: 50%;
}

#rund9 {
  border: 0;
}

#rund9::after {
  content:'';
  height: 0;
  width: 0;
  border: 5em solid transparent;
  border-bottom: 5em solid red;
  border-radius: 50%;
}
Ein div erhält über seine id-Selektoren jeweils unterschiedliche CSS-Festlegungen:
  • Box 1 wird bei gleicher Höhe und Breite mit border-radius: 50%; zum Kreis
  • Box 2 hat eine größere Breite, sodass das div-Element als Oval dargestellt wird.
  • Box 3 hat ein ::after-Pseudoelement mit einer Höhe und Breite von 0, das aber einen 5em breiten, transparenten Rand mit einem border-radius von 50% hat. Der untere Rand erhält nun eine rote Färbung. Da die linken und rechten Ränder transparent sind, läuft die Spitze auf das 0px große div zu.
Empfehlung: Zur Jahrtausendwende gab es CSS-Hacks (vergleiche: → Dreiecke mit CSS erzeugen), mit denen Sie geometrische Formen nur mit CSS ohne den Einsatz externer Grafiken erzielen konnten.
Heute bietet der Einsatz von SVG bessere und einfachere Möglichkeiten.

Rückblick: Runde und andere Ecken für skalierbare Boxen im Jahre 2004[Bearbeiten]

Heute ist fast schon vergessen, dass noch vor ein paar Jahren abgerundete Ecken nur unter großen Verrenkungen erreicht werden konnten: Der Selfhtml-aktuell-Artikel Runde und andere Ecken für skalierbare Boxen von Andreas Kalt vom 05.02.2004 zeigt, wie man eine skalierbare Box mit grafischer Umrahmung mittels mehrerer divs und Hintergrundgrafiken gestalten musste, um den gleichen Effekt wie mit border-radius zu erzielen.

Erst 2011 zog mit dem IE9 auch der letzte große Browser-Hersteller nach und unterstützte die border-radius-Eigenschaft.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]