Како се користи својство ЦСС3 Бордер Радиус

Са ЦСС3, било ком елементу можете дати „заобљене углове“ користећи border-radiusсвојство. Вредност може бити у било којој важећој јединици ЦСС дужине.

 .rounded-corners { border-radius: 20px; } .circle { border-radius: 50%; }
примери

Напомена:border-radius имовина је заправо скраћеница имовина заborder-top-left-radius,border-top-right-radius,border-bottom-right-radiusиborder-bottom-left-radiusсвојства.

Ако је наведена само једна вредност, радијус обруба биће исти за сва четири угла, као у горњим примерима. Али такође имате могућност да одредите различите вредности за сваки угао.

.new-shape { border-radius: 20px 50px 5px 0; /* top left, top right, bottom right, bottom left */ }

Ако су дате само две вредности, прва вредност се односи на горњи леви и доњи десни угао, а друга вредност се односи на горњи десни и доњи леви угао.

.leaf-shape { border-radius: 0 50%; }

Ако су постављене три вредности, прва се поново односи на радијус лево горе, друга вредност означава горњи десни и доњи леви, а трећа вредност означава доњи десни угао.

.odd-shape { border-radius: 0 20px 50%; }
примери

Заокруживање угла не мора бити савршено симетрично. Можете да одредите хоризонтални и вертикални радијус помоћу косе црте (”/”) да бисте постигли угао елиптичног облика.

.elliptical-1 { border-radius: 50px/10px; /* horizontal radius / vertical radius */ } .elliptical-2 { border-radius: 10px/50px; }
примери

Пошто је у горњим примерима дат само један пар вредности, сва четири угла су иста. Али, наравно, ако желите сложенији облик, можете дати до четири вредности за хоризонталне радијусе и четири за вертикалне радијусе.

.elliptical-3 { border-radius: 50px 20px 50px 20px/20px 50px 20px 50px; /* horizontal top-left, horizontal top-right, horizontal bottom-right, horizontal bottom-left / vertical top-left, vertical top-right, vertical bottom-right, vertical bottom-left */ }

Приметите како горња стенографија даје исти резултат као и специфицирање појединачних својстава у наставку. Имајте на уму да када се углови постављају појединачно, вредности се одвајају размаком уместо косим цртама.

.elliptical-4 { border-top-left-radius: 50px 20px; /* horizontal radius, vertical radius */ border-top-right-radius: 20px 50px; border-bottom-right-radius: 50px 20px; border-bottom-left-radius: 20px 50px; }
примери

Више информација о својству радијуса ЦСС границе:

  • Научите да користите својство радијуса радијуса ЦСС градећи калкулатор