Mit der Anweisung „border-radius“ geben wir Objekten abgerundete Ecken mit. Hintergrundfarben, Box-Schatten oder Rahmen werden in die Rundung einbezogen. Diese erscheinen ebenfalls in der entsprechend gewählten Rundung. Um den Code für einen entsprechenden Border-Radius zu erhalten können wir einfach erneut den CSS3 Generator bemühen. Dieser generiert uns sauber und inkl. der aktuellen Experimental-Prefixes unseren CSS3 Code.
Beispiele
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
-webkit-border-radius: 10px 20px 30px 40px;
-moz-border-radius: 10px 20px 30px 40px;
border-radius: 10px 20px 30px 40px;
}Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
-webkit-border-radius: 15px / 30px;
-moz-border-radius: 15px / 30px;
border-radius: 15px / 30px;
}.element {
-webkit-border-radius: 10px 80%;
-moz-border-radius: 10px 80%;
border-radius: 10px 80%;
overflow:hidden;
}