Mit CSS-Befehl „border-radius“ coole „Ecken“-Effekte erzeugen

Heute möchte ich ein geniales Tool vorstellen, mit dem Sie ganz einfach eigene organische Formen erstellen können. Zum Beispiel um Bilder zu stylen oder einfach nur coole Flächen zu erzeugen. Das Tool heißt „Fancy Border Radius Generator“ und wurde von Mirko und Nils von 9elements.com programmiert. Erzeugt werden die Formen mit Hilfe des CSS-Befehls „border-radius“. Den kennen sicherlich schon viele und benutzen ihn um Ecken abzurunden, aber er kann weitaus mehr, wie Sie hier sehen können:

Grafik: Fancy Border Radius Generator

Grundlagen des CSS-Befehls „border-radius“

Wie oben schon geschrieben, nutzen die meisten „border-radius“ um Ecken von Bildern oder Kästen abzurunden. Der Code border-radius: 30px beschreibt zum Beispiel, das alle vier Ecken um 30 Pixel abgerundet werden. Statt feste Werte wie px, rem oder em sind auch Prozentwerte % möglich. Möchte man aus einem Quadart einen Kreis erzeugen, verwendet man einfach folgenden Code border-radius: 50%. Dadurch werden alle Ecken um 50% abgerundet und das Quadart wird als Kreis dargestellt.

border-radius: 30px
a

border-radius: 50%
a

Unterschiedliche Rundungen an jeder Ecke

Verwend man mehr als einen Wert, beginnt man mit der Festlegung der Werte in der oberen linken Ecke und dann im Uhrzeigersinn weiter. Auch hier können Sie wieder Prozentwerte oder feste Längenwerten verwenden oder beides kombinieren.

border-radius: 20px 40px 10px 80px
a b c d

Asymetrische Ecken erzeugen durch Verwendung eines Schrägstrichs

Das oben erklärte werden Sie sicherlich schon bei vielen Projekten angewendet haben. Aber jetzt wird es spannend, was passiert, wenn Sie Werte durch einen Schrägstrich trennen und bis zu acht Werte angeben? Die Spezifikation von W3C sagt dazu folgendes: „Wenn Werte vor und nach dem Schrägstrich angegeben werden, legen die Werte vor dem Schrägstrich den horizontalen Radius und die Werte nach dem Schrägstrich den vertikalen Radius fest. Wenn kein Schrägstrich vorhanden ist, legen die Werte beide Radien gleich fest.“

Die Werte vor dem Schrägstrich sind also für die horizontalen Abstände verantwortlich und die Werte nach dem Schrägstrich für die vertikalen Abstände. Und so sieht das in der Prxis aus. Die symmetrischen Ecken der ersten Abbildung ohne Schrägstrich bilden einen Viertelkreis während die asymmetrischen Ecken der zweiten Abbildung mit Schrägstrich eine elliptische Form bilden.