Բլոկի եզրերի կլորացում CSS-ում

Այժմ մենք կսովորենք, թե ինչպես կլորացնել բլոկի անկյունները: Դրա համար պետք է օգտագործել border-radius հատկությունը, որը ընդունում է արժեք պիքսելներով:

Ի՞նչ է նշանակում, որ մենք նշել ենք կլորացում, օրինակ, 10px: Սա այն շրջանի շառավիղն է, որը կարելի է ներգծել այս կլորացման մեջ: Եթե մաթեմատիկայում լավ չեք և վերջին նախադասությունը ձեզ համար հասկանալի չէ՝ մոռացեք այն և ուղղակի ընտրեք կլորացումն աչքով: Որոշ փորձ ունենալու դեպքում դա խնդիր չի առաջացնի (կլորացումները չափելու համար չափիչ գործիք գոյություն չունի, գոնե ես այդպիսի մասին չեմ լսել):

Եկեք կլորացնենք բլոկի անկյունները՝ դրան տալով 10px կլորացում:

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

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

Результат: