Hier im Blog wird das ja genutzt und bei der Einführung habe ich es erwähnt, aber ich möchte nochmal kurz zusammenfassen wie man mit CSS nahezu beliebig Umrandungen (also auch die border-Eigenschaft eines div) abrunden kann. "Runde Ecken" bewirken eine andere Atmosphäre, was wahrscheinlich damit zusammenhängt, dass in der Natur sehr viele Dinge rund sind, bei menschengemachten Dingen dagegen Ecken dominieren.
Die einfachste Methode ist die Nutzung von CSS 3, dem border-radius. Folgender Code würde alle Elemente der Klasse .round abrunden:
.round {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Ein moz-border-radius-topleft würde nur die linke obere Ecke abrunden, moz-border-radius-bottomright nur die rechte untere beziehungsweise webkit-border-top-left-radius und webkit-border-bottom-right-radius respektive border-top-left-radius und border-bottom-right-radius. Für diese Einschränkung gibt es durchaus Einsatzmöglichkeiten, so ist das Suchfeld oben rechts nur links abgerundet und damit grafisch mit dem nur rechts abgerundeten Bestätigungsknopf verbunden, zusammen entsteht ein einzelnes rundes Element.
Der einleitende Name kennzeichnet die Gültigkeit: -moz-border-radius funktioniert nur mit Mozilla-Browsern (ab Firefox 3), -webkit-border-radius mit Webkit-Browsern (also Safari, Chrome, bald Epiphany), border-radius mit Opera (ab 10.5). IE und Opera sind ist damit außen vor. Das ist aber aus zwei Gründen verschmerzbar:
- Die zusätzliche Eigenschaft macht nichts kaputt. Kann der Browser damit nichts anfangen, wird die Seite halt wieder eckig.
- Je nach Einsatzgebiet der Seite ist der
Opera- und IE-Anteil sehr gering, hier z.B. - und in naher Zukunft dürften auch diese Browser (oder zumindest Opera) border-radius unterstützen.
Wenn trotzdem eine übergreifende Lösung gesucht wird, würde ich zu jQuery Corner greifen. Das hatte bei meinen Tests allerdings den Nachteil, dass für einen kurzen Moment die eckige Form sichtbar war, bevor das JavaScript geifen konnte.
Alternativ: Unter css-juice finden sich 25 andere Möglichkeiten, von denen einige ohne JavaScript auskommen, dafür dann aber passende Grafiken benötigen. Diese Liste bin ich damals durchgegangen, bevor ich über das border-radius-Attribut stolperte.
Edit: Die Syntax für Webkit-Browser angepasst.
Edit 2: Syntax für Opera hinzugefügt.
