Abgerundete Ecken für Boxen - Border Radius

Die Zeit der umständlich, undynamischen Grafiken und verschachtelten DIV's für "runde Ecken" hat mit CSS3 ein Ende.
Border-radius wird nicht vererbt.

Syntax für border-radius

Diese Eigenschaft ist in Entwicklung, deshalb verwenden Webkit- und Mozilla-Browser ein Präfix. Jeder Ecke kann ein eigener Werte zu geweisen werden.

Links oben / Rechts oben
border-top-left-radius / border-top-right-radius
-moz-border-radius-topleft / -moz-border-radius-toprigh
-webkit-border-top-left-radius / -webkit-border-top-right-radius
Rechts unten / Links unten
border-bottom-right-radius / border-bottom-left-radius
-moz-border-radius-bottomright / -moz-border-radius-bottomleft
-webkit-border-bottom-right-radius / -webkit-border-bottom-left-radius

Beispiele für border-radius

Wenn alle gerundeten Ecken gleich sind, muss der border-radius nur einmal definiert werden,

regelmässig gerundete Ecken.

border-radius: 15px; /* W3C Standard, Opera */
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari, Chrome */

Ecken einzeln ansprechen (Kurzschreibweise)

CSS bietet die Möglichkeit bestimmte Anweisungen verkürzt zu schreiben.
Die Datei wird um einiges kleiner und übersichtlicher.
Bei ungleich gerundete Ecken, kann der border-radius in einer zeile definiert werden. Reihenfolge: links-oben, rechts-oben, rechts-unten, links-unten.

TAB Style

border-radius: 15px 15px 0px 0px; /* W3C Standard, Opera */
-moz-border-radius: 15px 15px 0px 0px; /* Firefox */
-webkit-border-radius: 15px 15px 0px 0px; /* Safari, Chrome */

Ddiagonal

border-radius: 0px 25px 0px 25px;  /* W3C Standard, Opera */
-moz-border-radius:    0px 25px 0px 25px; /* Firefox */
-webkit-border-radius:  0px 25px 0px 25px;  /* Safari, Chrome */

unregelmässig

border-radius: 0px 25px 15px 50px;  /* W3C Standard, Opera */
-moz-border-radius:    0px 25px 15px 50px;  /* Firefox */
-webkit-border-radius: 0px 25px 15px 50px;  /* Safari, Chrome */

Unterschiedlicher horizontaler und vertikaler Radius

Das erste Set der Anweisungen (Werte 1-4) definert den horizontalen Radius für alle vier Ecken. Das optionale zweite Set der Anweisungen folgt nach einem "/" und definiert den vertikalen Radius von allen vier Ecken. Ist nur das erste Set definiert werden die Angaben für den horizontalen und den vertikale Radius verwendet.

vier verschieden runde Ecken

border-radius: 5px 20px 5px 20px / 10px 5px 10px 5px; 
-moz-border-radius: 5px 20px 5px 20px / 10px 5px 10px 5px;  
-webkit-border-radius: 20px 20px 5px 20px / 10px 5px 10px 5px;

unterschiedlicher Radius

border-bottom-right-radius: 25px 50px; /* W3C Standard, Opera */
-moz-border-radius-bottomright :  25px 50px; /* Firefox */
-webkit-border-bottom-right-radius: 25px 50px; /* Safari, Chrome */

WICHTIG

Border Radius und Internet Explorer

Browser, die das -moz- oder webkit-prefix nicht unterstützen, zeigen normale eckige Rahmen an.
Weitere Beispiele findest Du unter: border-radius, gradient, box-shadow und text-shadow