Abgerundete Ecken und Schatten mit CSS3

Abgerundet nach Herzenslust: Asymmetrische Ecken

Bisher noch keine Bewertungen für diesen Artikel.

Asymmetrische Ecken

Auf dieser Seite

Im letzten Beispiel war die Ecke symmetrisch abgerundet, als Basis lag ihr ein Kreis zugrunde. Sie können aber auch Ecken erstellen, die an einer Seite mehr abgerundet sind als an der anderen. Diesen Ecken basieren dann nicht auf einem Kreisviertel, sondern einem Ellipsenviertel.

Hierfür geben Sie zwei Werte durch einen Slash getrennt an:

border-radius: 0.5em/1em;

Dabei gibt es aber eine Besonderheit, wenn Sie auch ältere Safari (vor Version 5) unterstützen wollen: Dann müssen Sie bei der -webkit-Angabe statt des Slashes / ein Leerzeichen schreiben.

Damit lautet die abgerundete Variante folgendermaßen: 

#abgerundet {
  background-color: green;
  width: 10em;
  padding: 1em 0.5em;
  text-align: center;
  -moz-border-radius: 0.5em/1em;
  -webkit-border-radius: 0.5em 1em;
  border-radius: 0.5em/1em;
}

Beispiel:

Screenshot: Asymmetrische Ecke

Online-Beispiel anschauen: Box mit asymmetrischen EckenAnzeigen.

72539_borderradius2-png