Rotunjirea colțurilor blocului în CSS

Acum vom învăța să rotunjim colțurile unui bloc. Pentru aceasta trebuie aplicată proprietatea border-radius, care acceptă o valoare în pixeli.

Ce înseamnă faptul că am specificat o rotunjire, de exemplu, de 10px? Acesta este raza cercului care poate fi înscris în această rotunjire. Dacă nu vă descurcați cu matematica și nu ați înțeles ultima propoziție - uitați-o și pur și simplu ajustați rotunjirea cu ochiul. Cu ceva experiență, acest lucru nu este o problemă (nu există un instrument de măsură pentru măsurarea rotunjirilor, cel puțin eu nu am auzit de așa ceva).

Să rotunjim colțurile unui bloc, dându-i o rotunjire de 10px:

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

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

Результат: