Abgerundete Ecken

Beispiele

Abgerundete Ecken
Radius: 20px

Abgerundete Ecken
Radius: 20px 10px

Abgerundete Ecken
Radius: 5px 10px 15px 20px

Abgerundete Ecken
Radius: 5px 10px 15px 20px

Code Beispiel 1

#main .ce_text.rounded
{
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
background:#D6700B;
}

Code Beispiel 2

#main .ce_text.rounded
{
-moz-border-radius:20px 10px;
-webkit-border-radius:20px 10px;
border-radius:20px 10px;
background:#D6700B;
}

Code Beispiel 3

#main .ce_text.rounded
{
-moz-border-radius:5px 10px 15px 20px;
-webkit-border-radius:5px 10px 15px 20px;
border-radius:5px 10px 15px 20px;
background:#D6700B;
}

Code Beispiel 4

#main .ce_text.rounded
{
-moz-border-radius:5px 10px 15px 20px;
-webkit-border-radius:5px 10px 15px 20px;
border-radius:5px 10px 15px 20px;
background:#D6700B;
}

#main .ce_text.rounded:hover
{
-moz-border-radius:20px 15px 10px 5px;
-webkit-border-radius:20px 15px 10px 5px;
border-radius:20px 15px 10px 5px;
background:#555;
cursor:pointer;
}

Die CSS3-Eigenschaft border-radius
Für die Darstellung der abgerundeten Ecken wird die CSS3- Eigenschaft border-radius eingesetzt.

Die Eigenschaft border-radius kann in Kurzschreibweise für alle 4 Ecken mit gleichem Radius so geschrieben werden: border-radius: Wert Einheit;.
Beispiel: border-radius:10px;.

Es ist auch möglich, für jede Ecke individuelle Radien anzugeben. Die Schreibweise für 4 individuelle Radienangaben lauten:
border-bottom-left-radius: Wert Einheit;
border-bottom-right-radius:Wert Einheit;
border-top-left-radius:Wert Einheit;
border-top-right-radius:Wert Einheit;

Beispiel:
border-bottom-left-radius:8px; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:8px;
Hier sind den beiden oberen Ecken jeweils ein Radius von 8 Pixel zugewiesen; die beiden unteren Ecken bleiben eckig bzw. ohne Radius.

Für die Gecko-Browser (Firefox bis Version 4) sowie die Webkit-Browser (Safari ab 3.1 und Chrome ab 4.0) werden entsprechend die Eigenschaften spezifiziert angeben:

/* Gecko-Browser */
-moz-border-radius:8px;
/* Webkit-Browser */
-webkit-border-radius:8px;
/* CSS3 allgemein */
border-radius:8px; 

nach oben