Cвойство border-radius позволяет разработчикам определять, как скругляются границы блока. Закруглённость каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс. Если рамка не задана, то скругление также происходит и с фоном. Это свойство является короткой записью для четырёх свойств border-top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius.
border-radius հատկությունը ծրագրավորողներին թույլ է տալիս վերահսկել, թե ինչպես են տուփի եզրագծերը կլորացվում: Յուրաքանչյուր անկյունի կլորությունը սահմանվում է մեկ կամ երկու շառավղով, սահմանելով դրա ձևը՝ շրջան կամ էլիպս: Եթե սահմանը նշված չէ, ապա կլորացումը տեղի է ունենում նաև ֆոնի հետ: Այս հատկությունը համարվում է տվյալ չորս հատկությունների կրճատված տարբերակը ՝ border-top-left-radius, border-top-right-radius, border-bottom-right-radius և border-bottom-left-radius:
.what{
width: 100px;
height: 100px;
background-color: red;
border-radius:
}
See the Pen Untitled by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.
⇓Результат данного примера показан на рисунке⇓
⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓
| Browser | IE | Edge | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|---|
| Version | 9+ | 12+ | 5+ | 3+ | 5+ | 11.5+ |
| Notes |