Abgerundete Ecken werden häufig verwendet. Es ist daher schön, dass man diese mit CSS3 direkt implementieren kann und keine umständlichen Grafiken für massig Divs anfertigen muss.
Schade nur, dass der Internet Explorer bei CSS3 mal wieder ärger macht. Aber dafür gibt es eine Lösung: Wir arbeiten mit einem Script, dass den Fehler behebt.

Eine Webseite sollte aktuell vom Internet Explorer ab Version 6, Firefox ab Version 2, Safari und Opera vollständig zugänglich sein.

Firefox und Safari

Um die abgerundeten Ecken in Firefox und für Safari zu realisieren, haben die Browser eigene CSS-Eigenschaften:

.borderRadiusBox {
  -moz-border-radius: 10px; // Firefox
  -webkit-border-radius: 10px; // Safari; betrifft auch Chrome
}

Opera

Für Opera können wir die CSS-Eigenschaft ab der Version 10.5 nutzen. Sie ist auch in manchen 9er Version von Opera vorhanden. Eine Unterstützung ist wohl aber der Presto-Version 2.3 gewährleistet.

  -o-border-radius: 10px;

Für alle anderen Opera Versionen wird das Script nützlich, das wir später noch einbinden werden.

Damit wir auch den Konquerer und andere Browser mit der KHTML-Engine einschließen, fügen wir die Zeile

  -khtml-border-radius: 10px;

hinzu.

So soll es sein...

Das richtige CSS3-Attribut ist

  border-radius: 10px;

Auch diese Eigenschaft fügen wir hinzu um für zukünftige Browserversionen und ähnliches Gerüstet zu sein.
Die aktuellen Versionen von Firefox und Safari unterstützen diese Notation bereits.

Microsofts Mühle

Kommen wir also nun zum Internet Explorer. Hier ist das Ganze leider nicht mit einer eigenen CSS-Eigenschaft zu lösen, wie bei den anderen Browsern. Allerdings hat Microsoft in seinem Browser ein Attribut implementiert, das bei unserem Vorhaben hilfreich ist: über behavior kann man unter anderem Scripte laden.

Diese Hilfestellung nutzen wir um das Script border-radius.htc von Remiz Rahnas und Nick Fetchak zu laden (hier zum Download). Das Script macht genau das, was wir brauchen: abgerundete Ecken.
Dazu schreiben wir die Zeile

  behavior: url("border-radius.htc");

in unser CSS und legen die Datei in das Gleiche Verzeichnis wie die CSS-Datei ab.

Die eingebunden Datei muss dem Server noch bekannt gemacht werden, denn die Dateiendung .htc ist nicht auf jedem Server verfügbar.
Man sollte sich den Zugriff auf die Mime-Typen Datei ermöglichen und dann den Typ

  text/x-components

mit der Dateiendung htc ergänzen.

Unser CSS-Sheet sieht nun so aus:

.borderRadiusBox {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  -o-border-radius: 10px;
  behavior: url("border-radius.htc");
}

Somit haben wir nun für alle relevanten Browser eine Lösung geschaffen.

Ecken einzeln ansprechen

Um jeder Ecke einen anderen Wert zu zuweisen, kann man die Eigenschaften wie folgt anwenden:

• Links oben: -moz-border-radius-topleft / -webkit-border-top-left-radius
• Rechts oben: -moz-border-radius-topright / -webkit-border-top-right-radius
• Links unten: -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
• Rechts unten: -moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Leider verwenden die Browser unterschiedliche Titulierungen, deshalb ergibt sich hier viel Schreibarbeit.

Eine Demo gibt's hier.

Mehr …

• Weiterführende Infos zu behavior
• Informationen zum Script border-radius.htc
• Auch, wenn die Seite ein wenig altmodisch wirkt: RoundedCornr.com erstellt Grafiken, um abgerundete Ecken zu simulieren. Ohne CSS3 und JS.