loader

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:

Синтаксис

Գրելաձև

border-radius: 15px; ⟿ размер скругления border-radius: 15px; ⟿ Կլորացման աստիճանը
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores quia ea inventore maxime unde. Omnis atque consectetur eligendi alias possimus modi! Autem voluptatibus beatae eligendi quod. Sapiente quisquam quidem perspiciatis?

.what{
 width: 100px;
 height: 100px;
 background-color: red;
 border-radius:
}


0px50px

Пример

Օրինակ

See the Pen Untitled by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

wbr image

Также у тега border-radius есть следующие под. теги

Поддержка браузера дляԲրաուզերի աջակցությունը border-radius элемента տարրին
Browser IE Edge Chrome Firefox Safari Opera
Version 9+ 12+ 5+ 3+ 5+ 11.5+
Notes