Afronding van blokranden in CSS

Nu gaan we leren hoe we de hoeken van een blok kunnen afronden. Hiervoor moet je de eigenschap border-radius gebruiken, die een waarde in pixels accepteert.

Wat betekent het dat we een afronding hebben opgegeven, bijvoorbeeld van 10px? Dit is de straal van de cirkel die in deze afronding past. Als jij niet goed bent in wiskunde en je begrijpt de laatste zin niet - vergeet hem dan en kies gewoon op gevoel een afronding. Met wat ervaring is dat geen probleem (er bestaat geen meetinstrument om afrondingen te meten, tenminste, ik heb er nog nooit van gehoord).

Laten we de hoeken van een blok afronden door het een afronding van 10px te geven:

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

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

Результат: