Arrotondamento dei bordi di un blocco in CSS

Ora impareremo ad arrotondare gli angoli di un blocco. Per fare questo, dovrebbe essere applicata la proprietà border-radius, che accetta un valore in pixel.

Cosa significa aver specificato un arrotondamento, ad esempio, di 10px? Questo è il raggio del cerchio che può essere inscritto in questo arrotondamento. Se non sei bravo in matematica e non capisci l'ultima frase - dimenticala e regola semplicemente l'arrotondamento a occhio. Con un po' di esperienza non è un problema farlo (non esiste uno strumento di misurazione per misurare gli arrotondamenti, almeno, non ne ho sentito parlare).

Arrotondiamo gli angoli di un blocco, impostando un arrotondamento di 10px:

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

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

Результат: