Abgerundete Ecken / Runde Ecken

Elemente mit runden Ecken konnte man bisher nur mit Hilfe von Hintergrundgrafiken darstellen. Das war sehr mühsam, da die Elemente in kleine Teile zerlegt werden mussten, um jeden Teil ein Hintergrundbild mit einer Eckenrundung zuordnen zu können. Außerdem kam bei jeder klitzekleinen Änderung extrem viel Aufwand dazu, da man für jedes einzelne Grafik die runde Ecke bearbeiten musste.

Mit CSS 3 kann das nun fast für alle Browser über StyleSheets abfangen.

Definition in css

div.eckenrundung {
-moz-border-radius:3px 15px 5px 30px; /* Firefox */
-webkit-border-radius:3px 15px 5px 30px; /* Chrome, Safari */
-khtml-border-radius:3px 15px 5px 30px; /* Konqueror */
border-radius:3px 15px 5px 30px; /* CSS3 */
behavior:url(border-radius.htc); /* Internet Explorer */
}

Und so schaut´s aus

Und so kann man ganz einfach ohne eine Grafik über den border-radius in CSS3 eine Kreis abbilden.

Definition in css

div.kreis {
-moz-border-radius:100px; /* Firefox */
-webkit-border-radius:100px; /* Chrome, Safari */
-khtml-border-radius:100px; /* Konqueror */
border-radius:100px; /* CSS3 */
behavior:url(border-radius.htc); /* Internet Explorer */
width:100px;
height:100px;
}

Und so schaut´s aus