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

Это значение превращает квадратный элемент в идеальный круг. Для настоящего круга элемент должен иметь одинаковые ширину и высоту — например `width: 100px; height: 100px; border-radius: 50%`. Радиус 50% встречается посередине со всех четырёх сторон, создавая идеальную кривую. На непрямоугольном элементе 50% создаёт эллипс — шире или выше, в зависимости от пропорций элемента. Это самый распространённый способ делать круглые аватары, круглые кнопки и контейнеры для иконок в CSS.

Используйте `border-radius: 9999px` (или любое очень большое значение, например 100px) на непрямоугольном элементе — кнопке или бейдже. Браузер автоматически ограничивает радиус до половины меньшей стороны элемента, поэтому короткие концы превращаются в идеальные полукруги, а длинные стороны остаются прямыми. Получается классическая кнопка-таблетка, встречающаяся в большинстве современных дизайн-систем. Трюк с `9999px` работает независимо от размера элемента — не нужно вручную вычислять половину высоты. Пресет «Таблетка» в этом генераторе применяет этот шаблон мгновенно.

Пиксельные значения абсолютны — радиус `12px` остаётся 12 пикселями независимо от размера элемента. Если элемент масштабируется, размер угла остаётся фиксированным. Процентные значения относительны — `50%` всегда изгибается ровно до середины каждой стороны, создавая пропорциональную форму, масштабирующуюся вместе с элементом. Используйте проценты (`50%`) для форм типа кругов и таблеток, которые должны масштабироваться с элементом. Используйте пиксели для компонентов UI — карточек, кнопок и полей ввода, где нужен постоянный, зафиксированный в дизайн-системе размер угла независимо от содержимого.

Стандартный `border-radius` закругляет углы только наружу (выпукло). Для инвертированного или вогнутого угла — вдавленной «выемки» или «вырезки», используемой на билетах, вкладках и пузырях речи — нельзя обойтись одним `border-radius`. Распространённая техника — маска с радиальным градиентом: `mask: radial-gradient(circle 20px at top left, transparent 98%, black) top left / 51% 51% no-repeat ...`, повторяемая для каждого угла, который нужно сделать вогнутым. Альтернатива — позиционированный псевдоэлемент (`::before`) с цветом фона страницы и собственным выпуклым `border-radius`, накладываемый на угол, чтобы создать видимость вогнутой формы. Для зубчатых или перфорированных краёв — как линия отрыва на билете — вдоль одной стороны подойдёт повторяющаяся маска с радиальным градиентом. Таким образом, «инвертированный border-radius» — это, по сути, трюк с маской, а не значение border-radius.

Используйте отдельные свойства для углов: `border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius` или `border-bottom-left-radius`. Например, `border-bottom-right-radius: 24px` скругляет только нижний правый угол, оставляя остальные три острыми. Их можно комбинировать: `border-top-left-radius: 16px; border-bottom-right-radius: 16px` создаёт форму с диагональным скруглением. В сокращённой записи два значения задают противоположные пары углов: `border-radius: 16px 0` скругляет верхний левый и нижний правый углы, оставляя верхний правый и нижний левый острыми.

По часовой стрелке от верхнего левого: верхний левый → верхний правый → нижний правый → нижний левый. Таким образом, `border-radius: 16px 8px 0 8px` даёт верхнему левому 16px, верхнему правому 8px, нижнему правому 0 и нижнему левому 8px. Это соответствует стандартному направлению сокращённой записи CSS, используемому в `margin`, `padding` и `border-width`. При двух значениях первое применяется к верхнему левому и нижнему правому; второе — к верхнему правому и нижнему левому. При трёх значениях второе применяется как к верхнему правому, так и к нижнему левому. Одно значение применяется ко всем четырём углам одновременно.

Да — применяйте `border-radius` напрямую к элементу `<img>`: `img { border-radius: 50%; width: 100px; height: 100px; }` для круглого аватара. Либо оберните изображение в `<div>` с `overflow: hidden` и примените border-radius к обёртке — это даёт больше контроля над разметкой. Используйте функцию загрузки изображения в этом инструменте, чтобы проверить, как выглядит ваш радиус на реальном фото, прежде чем копировать CSS. Это особенно полезно для обрезки аватаров, превью медиакарточек и галерейных раскладок, где точная форма обрезки влияет на дизайн.

Задайте трём углам большое значение, а один оставьте равным нулю: `border-radius: 50% 50% 50% 0`. В сочетании с `transform: rotate(-45deg)` это создаёт классическую форму маркера на карте. Меняйте, какой угол равен нулю, чтобы направить каплю в разные стороны: `0 50% 50% 50%` указывает влево, `50% 0 50% 50%` — вправо. Угол с нулём создаёт острый кончик; три угла с большим радиусом образуют округлое тело. Полезно для маркеров местоположения, указателей и декоративных акцентов в иллюстративном стиле UI.

Слеш разделяет горизонтальные и вертикальные радиусы для каждого угла. Синтаксис выглядит так: `border-radius: [горизонтальные радиусы] / [вертикальные радиусы]`. Например, `border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%` создаёт яйцеподобную форму, где каждый угол имеет асимметричную эллиптическую кривую. Генератор случайных блобов в этом инструменте использует этот синтаксис для создания органичных, асимметричных форм — популярных для фонов героического экрана, декоративных блобов и дизайна в иллюстративном стиле. Каждый угол может иметь разное соотношение горизонтального и вертикального радиусов.

Инструмент border-radius на cssmatic.com рабочий, но устаревший — в нём нет загрузки изображений, генерации блобов и библиотеки пресетов. Справочник css-tricks.com — отличная документация, но не интерактивный генератор. Редактор clip-path bennettfeely.com пересекается по задачам, но работает с clip-path, а не с border-radius. Генератор UtiloKit предлагает: живой предпросмотр с загрузкой изображений (обрабатывается полностью на стороне клиента), пресеты форм (круг, таблетка, карточка, яйцо, блоб), генерацию случайных блобов с использованием восьмизначного синтаксиса со слешем, переключение единиц px/%, три формата копирования. Без рекламы, без водяных знаков, без регистрации, ничего не отправляется на сервер.

Нет — изображение загружается исключительно через File API браузера и никогда не покидает ваше устройство. Элемент предпросмотра рендерит изображение локально с помощью вызова `createObjectURL()`, который полностью остаётся в памяти браузера. Никакой загрузки, никакой серверной обработки, никакого облачного хранения. Та же клиентская архитектура применяется ко всем остальным функциям: ввод ползунков, генерация CSS, рандомизация блобов и копирование в буфер обмена — всё работает в JavaScript без каких-либо сетевых запросов после первоначальной загрузки страницы. Ваши изображения и дизайн-работы остаются полностью конфиденциальными.

`border-radius` полностью поддерживает анимацию через CSS-переходы и анимации ключевых кадров. Используйте `transition: border-radius 0.3s ease` для плавной интерполяции между двумя значениями при наведении. Используйте `@keyframes` для непрерывного изменения формы — анимация от `0` до `50%` превращает квадрат в пульсирующий круг. Переход между двумя блоб-формами (разные восьмизначные значения со слешем) создаёт плавные, органичные анимации, популярные для фонов героического экрана. Обратите внимание: анимация border-radius вызывает перерисовку на каждом кадре, поэтому используйте `will-change: border-radius` для элементов, которые анимируются часто.

`border-radius` — исключительно визуальное свойство: оно обрезает видимый вид элемента, но не изменяет его блок разметки, область отступов или зону срабатывания указателя. Невидимые прямые углы остаются кликабельными и занимают своё место в разметке. Это важно знать для сенсорных интерфейсов: у круглой кнопки по-прежнему есть квадратная кликабельная область по углам. Если нужно, чтобы зона клика точно следовала скруглённой форме, используйте `clip-path: circle()` — он также обрезает события указателя. `box-shadow` корректно следует `border-radius`; `outline` в большинстве браузеров — нет: используйте `box-shadow: 0 0 0 3px цвет` как альтернативу скруглённого кольца фокуса.

Да — инструмент полностью адаптивен и работает в любом современном мобильном браузере. На iPhone используйте его в Safari или Chrome без установки чего-либо. На Android работают Chrome, Firefox и Edge. Ползунки оптимизированы для сенсорного управления с правильно sized дескрипторами перетаскивания. Загрузка изображений использует нативный файловый выбор на мобильных устройствах, позволяя выбирать из медиатеки или файлового менеджера. Копирование CSS в буфер обмена работает через стандартный Web Clipboard API, поддерживаемый всеми современными мобильными браузерами. Весь инструмент работает на стороне клиента: никаких загрузок приложений, никаких аккаунтов, никаких отправок данных.