Abgerundete Ecken und Schatten mit CSS3

Abgerundet nach Herzenslust

Unterschiedliche Ecken

Nicht immer sollen alle Ecken und alle Ecken auf dieselbe Art gerundet sein. Sie können die Ecken auch einzeln definieren.

Einzeleigenschaften für alle Ecken

In CSS3 sind folgende Einzeleigenschaften für alle vier Ecken vorgesehen:

  • border-top-left-radius - obere linke Ecke

  • border-top-right-radius - obere rechte Ecke

  • border-bottom-right-radius - untere rechte Ecke

  • border-bottom-left-radius - untere linke Ecke

Für Firefox < 4 brauchen Sie wieder -moz- als Präfix. Außerdem heißen bei Firefox < 4 diese Eigenschaften etwas anders:

  • -moz-border-radius-topleft - obere linke Ecke

  • -moz-border-radius-topright - obere rechte Ecke

  • -moz-border-radius-bottomright - untere rechte Ecke

  • -moz-border-radius-bottomleft - untere linke Ecke

In folgendem Beispiel wird nur die obere rechte Ecke abgerundet:

#abgerundet {
  background-color: #5ccccc;
  width: 10em;
  padding: 1em 0.5em;
  text-align: center;
  -moz-border-radius-topright: 1em;
  -webkit-border-top-right-radius: 1em;
  border-top-right-radius: 1em;
}

Beispiel:

Online-Beispiel anschauen: Box, bei der nur die obere rechte Ecke abgerundet istAnzeigen.

Screenshot: obere rechte Ecke abgerundet.

Abkürzungen

Wenn Sie für jede der vier Ecken gesonderte Werte festlegen wollen, so ist das viel Schreibarbeit. Stattdessen können Sie auch eine verkürzte Schreibweise nutzen.

Das funktioniert prinzipiell genauso, wie Sie auch anstelle von padding-left, padding-top, padding-bottom, padding-right einfach mehrere Werte hinter padding angeben können.

Dabei gilt folgendes Prinzip

  • Wenn Sie einen Wert hinter border-radius schreiben, so gilt dieser für alle vier Ecken.

  • Bei zwei Werten hinter border-radius gilt der erste für oben links und unten rechts; der zweite bestimmt die Abrundung der rechten oberen und linken unteren Ecke.

  • Bei drei Werten hinter border-radius gilt der erste für oben links, der zweite für die rechte obere und die linke untere Ecke, der dritte für die obere rechte Ecke.

  • Bei vier Werten hinter border-radius gilt der erste für oben links, der zweite für oben rechts, der dritte für unten rechts und der vierte für unten links.

Im folgenden Beispiel sind die linke obere und die rechte untere Ecke mit 0.5em weniger stark abgerundet als die anderen beiden Ecken, für die als Wert 1em angegeben wurde.

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

Beispiel:

Online-Beispiel anschauen: Box mit unterschiedlich abgerundeten EckenAnzeigen.

Screenshot: Ecken unterschiedlich abgerundet

Safari vor Version 5

Bei diesem Beispiel wurde auf die Angabe der Möglichkeiten für Safari < 5 verzichtet, weil er mehrere durch Leerzeichen getrennte Angaben hinter -webkit-border-radius als asymmetrische Ecken interpretiert.

Zur Frage, wie man border-radius auch in älteren Browsern wie dem IE < 9 darstellt, kommen wir gleich - erst einmal geht es um eine zweite schöne CSS3-Eigenschaften: box-shadow.

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