Abgerundete Blockränder in CSS
Jetzt lernen wir, wie man die Ecken
eines Blocks abrundet. Dazu verwendet man
die Eigenschaft border-radius, die
einen Wert in Pixeln annimmt.
Was bedeutet es, wenn wir eine Abrundung
von zum Beispiel 10px angegeben haben? Das ist der Radius des Kreises,
den man in diese Abrundung einpassen kann. Wenn
Sie mit Mathematik auf Kriegsfuß stehen und der
letzte Satz für Sie unverständlich war - vergessen Sie ihn einfach und
passen Sie die Abrundung einfach nach Augenmaß an. Mit
etwas Erfahrung ist das kein Problem (ein Messwerkzeug
zum Messen von Abrundungen existiert nicht,
zumindest habe ich noch nie davon gehört).
Lassen Sie uns die Ecken eines Blocks abrunden, indem wir ihm
eine Abrundung von 10px zuweisen:
<div id="elem"></div>
#elem {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px;
}
:
Wiederholen Sie die Seite nach diesem Beispiel:
