Abgerundete Ecken

Abgerundete Ecken gibt es auf modernen Websites überall: bei Buttons, Karten, Eingabefeldern und Profilbildern. Sie werden mit der Eigenschaft border-radius erzeugt:

border-radius: 10px;

Der Wert ist der Radius der Rundung: Je größer er ist, desto runder sind die Ecken. Die Rundung gilt für die ganze Box, funktioniert also auch bei einem Element, das nur eine Hintergrundfarbe und keinen Rahmen hat.

Auch Prozentwerte sind nützlich: border-radius: 50% macht aus einem Quadrat einen Kreis, so entstehen runde Profilbilder. Hier siehst du eine Box mit border-radius: 12px und ein Quadrat mit border-radius: 50%: