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 {
width: 100%;
padding: 50px;
box-sizing: border-box;
border-radius: 3px 15px 5px 30px;
background: #dfdfdf;
}

Und so schaut's aus

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

div.kreis {
width: 10%;
padding: 50px;
box-sizing: border-box;
border-radius: 100px;
background: #dfdfdf;
}

Und so schaut's aus