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:

html<div id="elem"></div>

css#elem {
  width: 300px;
  height: 100px;
  border: 1px solid red;
  border-radius: 10px;
}

Результат: