Runde Ecken per CSS

Moderne Browser unterstützen schon heute das Abrunden von Ecken per CSS. Da das Abrunden von Ecken allerdings noch kein offizieller Standard ist, kocht derzeit noch jeder Browser-Hersteller sein eigenes Süppchen. Bis das Ganze zum offiziellen Standard wird, können noch einige Jahre vergehen, sodass man derzeit noch mit etwas längerem Code leben muss. Nachdem ich eben bei Horst seinen kurzen Artikel über das Abrunden von Ecken per CSS gelesen habe, entschied ich mich, auch einen Artikel darüber zu schreiben. Außerdem hat Horst bei seiner Aufzählung zwei gängige CSS-Eigenschaften für abgerundete Ecken vergessen, weshalb ihr hier nun die komplette Liste der möglichen CSS-Eigenschaften zum Abrunden von Ecken findet. Ebenso gebe ich eine kurze, aber ausführliche Einleitung zur Verwendung der Eigenschaften.

Für das zukünftige CSS3 ist die Eigenschaft

border-radius

vorgesehen. Diese Eigenschaft sollte man jetzt schon verwenden, auch wenn bisher kaum ein Browser diese Eigenschaft versteht. Für Mozilla-basierte Browser kann man bereits

-moz-border-radius

verwenden. Webkit-basierte Browser verstehen hingegen

-webkit-border-radius

Dann fehlt noch Opera mit

-opera-border-radius

und KHTML-basierte Browser mit

-khtml-border-radius

Im produktiven Einsatz könnte eine CSS-Definition z.B. so aussehen:

.rounded {
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -opera-border-radius: 5px;
   -khtml-border-radius: 5px;
}

Mit dieser Definition würden alle 4 Ecken eines Elementes mit 5px abgerundet werden. Möchte man nur bestimmte Ecken abrunden, kann man folgende Syntax verwenden:

Rundung: oben links, oben rechts, unten rechts, unten Links;

Um also z.B. nur oben links und unten rechts mit 3px abzurunden, verwendet man folgenden Eintrag (hier nur am Beispiel von border-radius):

border-radius: 3px 0px 3px 0px;

Ich hoffe, dass das Ganze verständlich ist. Bei Fragen könnt ihr mir gerne einen Kommentar schreiben

Empfehlen