CSS: Ecken abrunden (border-radius)

Wer kennt das nicht: Man erstellt eine Website und alles sieht eckig und kantig auf. Schluss damit! Mithilfe von CSS ist es sehr einfach, Ecken, zum Beispiel von Bildern, abzurunden. Der Code, mit dem man die Ecken abrunden kann lautet:
border-radius:10px;

Wie man oben sieht, rundet border-radius:10px; alle Ecken ab. Wenn man das nicht möchte, kann man folgenden Code verwenden:
border-radius:10px 0px 20px 50px;

Wenn man also vier Radien angibt, kann man die einzelnen Ecken verschieden abrunden. Dabei steht der erste Radius (hier: 10px) für die Ecke oben links, der zweite (hier: 0px) für die Ecke oben rechts, der dritte (hier: 20px) für die Ecke unten rechts und der vierte Radius für die Ecke unten links. Man geht also im Uhrzeigersinn von oben links nach unten links.


Mithilfe des border-radius kann man auch einen Kreis erzeugen. Hier ein Beispiel:
<div style="width:100px; height:100px; border-radius:100px; background-color:red;"></div>

14.11.2013