Генератор на заоблени ъгли — визуален CSS border-radius инструмент

Плъзнете плъзгачите, за да оформите всеки ъгъл на кутията за преглед, и копирайте получения border-radius CSS код. Заключете всичките четири ъгъла заедно за прост заоблен правоъгълник или ги отключете, за да създадете форми на хапче, листо и асиметрични капковидни форми.

Какво представлява този инструмент?

border-radius е CSS свойството, което заобля ъглите на елемент. Написано на ръка, то приема четири стойности в определен ред — горе-ляво, горе-дясно, долу-дясно, долу-ляво — което лесно се обърква, особено когато четирите ъгъла се различават.

Този инструмент премахва гадаенето: местете плъзгач, наблюдавайте как ъгълът се заобля в живия преглед и прочетете точния CSS код от полето с генерирания код. Един превключвател за заключване сменя между еднакъв радиус (всичките четири ъгъла еднакви, най-честият случай) и четири независими плъзгача за органични, асиметрични форми.

Защо да го използвате?

Живият преглед се обновява мигновено, докато плъзгате — без редактиране на CSS и презареждане, за да видите резултата.
Заключване с едно кликване за честия случай 'еднакъв радиус на всеки ъгъл'; отключете за бутони във формата на хапче, балончета за реч и капковидни форми.
Извежда съкратената едностойностна форма, когато всички ъгли съвпадат, или пълната четиристойностна форма, когато не съвпадат — готов за копиране и поставяне и в двата случая.
Работи изцяло във вашия браузър. Нищо, което въвеждате, не се изпраща никъде.
Безплатен, без регистрация, работи на мобилни устройства.

Как да го използвате

Оставете отметнато 'заключи всички ъгли' и плъзнете произволен плъзгач, за да зададете еднакъв радиус за цялата кутия.
Премахнете заключването, за да управлявате всеки ъгъл независимо — полезно за форми на хапче, капки и асиметрични картички.
Наблюдавайте как кутията за преглед се обновява в реално време, докато регулирате всеки плъзгач.
Копирайте генерирания CSS код от полето с код и го поставете в таблицата си със стилове.

Пример

Вход

Горе-ляво: 40px, Горе-дясно: 8px, Долу-дясно: 40px, Долу-ляво: 8px

Резултат

border-radius: 40px 8px 40px 8px;

Несъвпадащи противоположни ъгли по този начин създават силует на листо или venčeno листче — често срещан ефект в дизайна на картички и значки.

px или % — коя единица да използвам?

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

Процентите се държат различно — те са относителни спрямо собствената ширина и височина на елемента, така че радиус от 50% на квадратен елемент създава перфектен кръг, а на неквадратен елемент създава елипса. Ако искате този ефект (аватари, капковидни форми, които се мащабират с контейнера), вземете генерирания CSS код и заменете px стойностите с % стойност ръчно — например border-radius: 50% превръща всяка квадратна кутия в кръг.

Често срещани шаблони на border-radius

Заоблена картичка: всички ъгли еднакви, приблизително 8–16px за UI компоненти.
Бутон във формата на хапче: задайте радиуса на половината от височината на елемента (или просто използвайте 9999px, което автоматично ограничава до пълна форма на хапче независимо от височината).
Кръгъл аватар: border-radius: 50% на квадратен елемент (равни ширина и височина).
Балонче за реч: три заоблени ъгъла, един остър ъгъл — задайте три плъзгача високо и един на 0.
Форма на листо / венчелистче: противоположните ъгли съвпадат, съседните ъгли се различават — напр. горе-ляво и долу-дясно и двата големи, горе-дясно и долу-ляво и двата малки.

Комбиниране със сянка

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

→ Генератор на сянка на кутия

Често задавани въпроси

Каква е разликата между border-radius и реда на ъглите?

CSS съкращението винаги следва реда горе-ляво, горе-дясно, долу-дясно, долу-ляво, по часовниковата стрелка, започвайки от горе-ляво. Четирите плъзгача на този инструмент са означени съответно, така че никога не се налага сами да помните реда.

Мога ли да използвам различни единици за всеки ъгъл?

Да, в реален CSS можете да смесвате px, %, em и rem между ъглите, макар че на практика това е рядко срещано. Този инструмент генерира еднакви px стойности за простота — сменете произволна отделна стойност на % или друга единица директно в таблицата си със стилове, ако имате нужда от смесени единици.

Защо border-radius: 50% понякога прави овал вместо кръг?

Защото процентите са относителни към всяка ос поотделно — хоризонталният радиус е процент от ширината на елемента, а вертикалният радиус е процент от височината му. При квадратен елемент (равни ширина и височина) това създава перфектен кръг; при правоъгълник създава елипса.

Работи ли border-radius и върху фонови изображения и рамки?

Да — border-radius изрязва фона на елемента, рамката му и (в съвременните браузъри) неговата box-shadow до заоблената форма. Не изрязва дъщерно съдържание, което прелива, освен ако не зададете и overflow: hidden на родителя.

Има ли ограничение колко голям може да бъде радиусът?

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

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

За форма на хапче (капсула) задайте радиуса на поне половината от височината на елемента — обичайният трик е border-radius: 9999px, който работи при всяка височина, защото браузърът автоматично ограничава кривата. Перфектният кръг изисква две неща: равни ширина и височина плюс border-radius: 50%.

Генератор на border-radius