Към основното съдържание
LibraTool logoLibraTool

Генератор на CSS border-radius — безплатно

Визуално проектирайте заоблени ъгли с независим контрол над всеки ъгъл. Поддържа елиптичния синтаксис X/Y за органични форми.

Работи офлайн след зареждане
border-radius: 20px 20px 20px 20px;
Мерна единица

Често срещани употреби

  • Органични Blob ФормиИзползвайте елиптичния синтаксис X/Y, за да създадете уникални blob форми за hero секции и илюстрации.
  • Ъгли на Картица и КонтейнерСтандартни закръглени ъгли за картици, контейнери и панели в модерния UI дизайн.
  • Avatar & Форми на Проилна СнимкаСъздайте правилния стил на ъгъл за профилни снимки: кръгла, squircle или закръглен квадрат.
  • Хапчета, Етикети и ЗначкиИзградете перфектно закръглени бутони за хапчета, етикети и значки с 9999 preset.
  • Асиметрични Дизайни на ЪглиСмесвайте радиусите през ъгълми, за да създадете отличителни, разпознаваеми по марка форми на картици и бутони.

Как работи

Генераторът на border-radius работи изцяло в браузъра — няма сървър, няма библиотека и няма качване. Той изгражда низа със стойността на CSS border-radius директно в JavaScript, използвайки React state и useMemo, след което го прилага като вграден стил върху жив div елемент, така че самият CSS двигател на браузъра рендерира формата в реално време.

  1. 1
    Плъзгачите записват състоянието
    Всеки вход за диапазон записва в една от осем числови променливи на състоянието — четири хоризонтални радиуса на ъгли и четири вертикални за елиптичен режим. Унифицираният режим свежда всичките осем до един-единствен плъзгач чрез помощна функция setAll, която синхронизира всички стойности наведнъж.
  2. 2
    useMemo сглобява CSS стойността
    Хук useMemo преизчислява низа border-radius при всяка промяна на стойност на ъгъл, единица (px или %) или превключвателя за елиптичен режим. В стандартен режим произвежда съкратения запис с четири стойности; при включен елиптичен режим добавя разделителя с наклонена черта за пълния синтаксис с осем стойности — напр. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    CSS двигателят на браузъра рендерира прегледа
    Изчисленият низ се задава като вграден стил borderRadius върху обикновен div елемент. Целият рендеринг се извършва от двигателя за оформление на браузъра — няма canvas, няма SVG и няма код за рисуване на трета страна.
  4. 4
    Clipboard API копира изхода
    Кликването върху „Копирай“ извиква navigator.clipboard.writeText с или декларацията CSS (border-radius: ...;), или еквивалентния произволен клас на Tailwind (rounded-[...]), в зависимост от избрания превключвател на формата.

Свързани инструменти

🎨

Генератор на CSS box-shadow

Визуален конструктор за CSS box-shadow с жив преглед, наслагване на множество слоеве, избор на цвят, превключване на inset и копиране с едно кликване. Включва предварителни настройки за Material, ньоморфизъм и glow.

Опитайте
🟦

CSS Grid генератор

Визуално проектирайте CSS мрежа — записи, единици и празнини — и копирайте генерирания CSS и HTML.

Опитайте
↔️

CSS Flexbox генератор

Експериментирайте с flex посока, обвиване, justify и align на живите елементи — и копирайте CSS.

Опитайте

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