Bloka robežu noapaļošana CSS

Tagad mēs iemācīsimies noapaļot bloka stūrus. Lai to izdarītu, jālieto īpašība border-radius, kas pieņem vērtību pikseļos.

Ko nozīmē tas, ka mēs norādījām noapaļošanu, piemēram, 10px? Tas ir apļa rādiuss, ko var ierakstīt šajā noapaļojumā. Ja jums ir neveiksmīs ar matemātiku un jums nav skaidrs pēdējais teikums - aizmirstiet to un vienkārši izvēlieties noapaļojumu pēc acs. Ar zināmu pieredzi to izdarīt nav problēma (mērīšanas rīka noapaļojumu mērīšanai neeksistē, vismaz es par tādu neesmu dzirdējis).

Noapaļosim bloka stūrus, iestatot tam noapaļojumu 10px:

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

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

Результат: