Bloko kraštų apvalinimas CSS

Dabar mes mokysimės apvalinti kampus prie bloko. Tam reikia taikyti savybę border-radius, kuri priima reikšmę pikseliais.

Ką reiškia, kad nurodėme apvalinimą, pavyzdžiui, 10px? Tai apskritimo spindulys, kurį galima įrašyti į šį apvalinimą. Jei jums nesiseka matematika ir jums nesuprantamas paskutinis sakinys - pamirškite jį ir tiesiog parinkite apvalinimą akimis. Turint tam tikrą patirtį tai padaryti nėra problema (matavimo priemonės apvalinimams matuoti neegzistuoja, bent jau aš apie tokią negirdėjau).

Apvalinkime bloko kampus, nustatę apvalinimą 10px:

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

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

Результат: