Abgerundete Ecken mit CSS

CSS3 bringt die Lösung für ein typisches Layoutproblem: "Abgerundete Ecken bei einer Box mit variabler Breite und Höhe" Die bisherige Lösung ist die Verwendung von Grafiken. Sprich: Jede Ecke hat eine eigene Grafik. Da diese Variante jedoch mindestens 4 Grafiken und mehrere <div> erfordert und in Kombination mit Schlagschatten oder Verläufen doch sehr kompliziert werden kann, erkläre ich hier, wie man das ganze mit CSS3 einfach und sauber lösen kann.

Die Syntax

div {

    border-radius: 15px;

    -moz-border-radius: 15px;

    -webkit-border-radius: 15px;

}

Man kann natürlich auch jede Ecke einzeln angeben

div {

    border-top-left-radius: 15px;

    border-top-right-radius: 15px;

    border-bottom-left-radius: 15px;

    border-bottom-right-radius: 15px;

}

Browserkompatibilität

border-radius Firefox (ab 3.6), Opera (ab 10.5), Safari (ab 5), Chrome (ab 5) und IE (ab 9)
-moz-border-radius Firefox (ab 1)
-webkit-border-radius Safari (ab 3), Chrome (ab 3)

Chris