Runde Ecken per CSS

veröffentlicht am 30. April 2010

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 wieder einmal einen Artikel über das Abrunden von Ecken per CSS gelesen habe, entschied ich mich, nun auch einen Artikel darüber zu schreiben.

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 :)

Kommentare

Geht auch komfortabel mit einen CSS-Generator:
http://www.css3generator.com/

Kommentar #1 von Matthias am 30. April 2010


Hey Matthias, danke nochmal für den Tipp. Aber was ist mit den weiteren herstellerspezifischen CSS-Attributen? Oder werden die nicht mehr genutzt?

Kommentar #2 von Patrick am 30. April 2010


Wenn der Browser CSS3 untersützt, werden die Angaben nicht mehr benötigt.

Kommentar #3 von Matthias am 30. April 2010


Hinterlasse einen Kommentar