Abgerundete Ecken und Schatten mit CSS3

Abgerundet nach Herzenslust

Asymmetrische Ecken

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:

Online-Beispiel anschauen: Box mit asymmetrischen EckenAnzeigen.

Screenshot: Asymmetrische Ecke

Mitglied werden, Vorteile nutzen!

  • Sie können alles lesen und herunterladen: Beiträge, PDF-Dateien und Zusatzdateien (Checklisten, Vorlagen, Musterbriefe, Excel-Rechner u.v.a.m.)
  • Unsere Autoren beantworten Ihre Fragen

Inhalt

Downloads zu diesem Beitrag

Über die Autorin:

bild117864

Dr. Florence Maurice bietet Dienstleistungen im Webpublishing in Form von Fachtexten und Trainings (auch maßgeschneiderte Inhouse-Schulungen). Außerdem programmiert sie Webseiten. Ihre Themen: HTML, ...

Newsletter abonnieren