Генератор заобљених углова — визуелни CSS border-radius алат

Превуците клизаче да обликујете сваки угао оквира за преглед и копирајте добијени border-radius CSS код. Закључајте сва четири угла заједно за једноставан заобљени правоугаоник, или их откључајте да бисте направили облике пилуле, листа и асиметричне, органске облике.

Šta je ovaj alat?

border-radius је CSS својство које заобљава углове елемента. Када се пише ручно, узима четири вредности у фиксном редоследу — горе лево, горе десно, доле десно, доле лево — што је лако помешати, посебно када се сва четири угла разликују.

Овај алат уклања нагађање: померите клизач, посматрајте како се угао заобљава у прегледу уживо и очитајте тачан CSS код из поља са генерисаним кодом. Једно дугме за закључавање пребацује између јединственог радијуса (сва четири угла иста, најчешћи случај) и четири независна клизача за органске, асиметричне облике.

Zašto ga koristiti?

Преглед уживо се ажурира тренутно док превлачите — без уређивања CSS-а и освежавања да бисте видели резултат.
Закључавање једним кликом за уобичајен случај 'исти радијус на сваком углу'; откључајте за дугмад у облику пилуле, облачиће за говор и облике мрље.
Генерише скраћени облик са једном вредношћу када се сви углови поклапају, или пуни облик са четири вредности када се не поклапају — спреман за копирање и лепљење у оба случаја.
Ради у потпуности у вашем прегледачу. Ништа што унесете се никуда не шаље.
Бесплатно, без пријаве, ради на мобилним уређајима.

Kako se koristi

Оставите означено 'закључај све углове' и превуците било који клизач да поставите јединствени радијус за цео оквир.
Искључите закључавање да бисте контролисали сваки угао независно — корисно за облике пилуле, сузе и асиметричне картице.
Пратите како се оквир за преглед ажурира уживо док подешавате сваки клизач.
Копирајте генерисани CSS код из поља са кодом и налепите га у своју табелу стилова.

Primer

Unos

Горе лево: 40px, горе десно: 8px, доле десно: 40px, доле лево: 8px

Rezultat

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

Неподударни супротни углови на овај начин стварају силуету листа или латице — уобичајен ефекат у дизајну картица и ознака.

px или % — коју јединицу да користим?

Овај генератор даје вредности у пикселима, што је исправан подразумевани избор за већину рада на корисничком интерфејсу: дугмад, картице и поља за унос где желите фиксан, предвидив радијус угла без обзира на величину елемента.

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

Уобичајени обрасци border-radius

Заобљена картица: сви углови једнаки, отприлике 8–16px за компоненте корисничког интерфејса.
Дугме у облику пилуле: поставите радијус на половину висине елемента (или једноставно користите 9999px, који се аутоматски ограничава на потпуну пилулу без обзира на висину).
Кружни аватар: border-radius: 50% на квадратном елементу (једнака ширина и висина).
Облачић за говор: три угла заобљена, један угао оштар — поставите три клизача високо, а један на 0.
Облик листа / латице: супротни углови се поклапају, суседни углови се разликују — нпр. горе лево и доле десно оба велика, горе десно и доле лево оба мала.

Комбиновање са сенком

Заобљени углови ретко се јављају сами — картицама и дугмади обично је потребно и мало сенке за дубину. Користите Генератор Box Shadow да подесите падајућу сенку и примените оба генерисана дела CSS кода на исти елемент.

→ Генератор Box Shadow

Često postavljana pitanja

Која је разлика између 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