Генератор на Border Radius

Заобляйте всеки ъгъл с плъзгачи, оформяйте органични петна с елиптичния режим и копирайте CSS кода мигновено.

Шаблони
Ъгли
Всички ъгли
24px
CSS
Плъзнете плъзгачите, за да заоблите ъглите си.

Всеки ъгъл се изчертава директно във Вашия браузър. Нищо от това, което настройвате тук, не се изпраща към BroBroGo.

ЧЗВ

Как работят четирите ъгъла и разликата между px и %?

Четирите плъзгача съответстват по посока на часовниковата стрелка на горния ляв, горния десен, долния десен и долния ляв ъгъл. В пиксели ъгълът се заобля с фиксирана стойност; в проценти се заобля спрямо кутията — хоризонталният процент следва ширината, а вертикалният процент следва височината, така че 50% превръща квадрата в кръг.

Какво прави елиптичният режим?

Когато е изключен, всеки ъгъл е четвърт кръг с един радиус. Включете го и всеки ъгъл ще получи отделен хоризонтален и вертикален радиус, с което се създават меки, органични форми на „петна“ (blobs). Генераторът записва формата с две стойности, разделени с наклонена черта, и се връща към кратката форма, когато ъглите отново станат кръгли.

Как да направя перфектен кръг или форма на хапче?

Свържете ъглите, превключете на проценти и задайте 50%: квадратът ще стане кръг. За бутон с форма на хапче запазете пикселите и плъзнете някой ъгъл отвъд половината от височината на бутона — страните ще останат напълно заоблени при всяка ширина. Готовият шаблон „Кръг“ настройва първия случай с едно щракване.