Основные выводы
- 01Три режима — универсальный, пер-угловой и эллиптический — охватывают всё от простых скругленных кнопок к органическим blob формам.
- 02Поддерживает px, % и rem единицы, каждая с различным поведением масштабирования.
- 03Эллиптический режим раскрывает горизонтальные и вертикальные радиусы по углам для полного синтаксиса border-radius CSS.
- 04Живой предпросмотр использует реальное свойство CSS, поэтому то, что вы видите, это в точности то, что будет отображать ваш браузер.
От простых скругленных углов к органическим blob формам
Значение border-radius для четырех углов легко достаточно ввести по памяти — border-radius: 8px. Но когда вам нужны разные радиусы по углам, или вы хотите синтаксис эллиптического CSS для органических форм, сокращение быстро становится неясным. Полная форма — это top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — восемь значений в определенном порядке.
Генератор border-radius Handytool позволяет перетаскивать ползунки для каждого угла в любом режиме и видеть форму обновляться вживую. Переключайтесь между px, % и rem без пересчёта и скопируйте правильное сокращение или долгую форму декларации CSS, когда закончите.
Как создать Border Radius
- 01
Выберите режим
Универсальный режим применяет один радиус ко всем четырем углам. Режим по углам управляет каждым углом независимо. Эллиптический режим добавляет отдельный горизонтальный и вертикальный радиус по углам.
- 02
Выберите единицу
Выберите px для абсолютных размеров, % для значений, которые масштабируются с размерами элемента, или rem для размеров, связанных с размером шрифта корневого элемента.
- 03
Перетаскивайте ползунки
Отрегулируйте значения радиуса и смотрите, как элемент предпросмотра обновляется вживую. Для режима по углам перетаскивайте ползунок каждого угла независимо.
- 04
Просмотрите форму
Поле предпросмотра применяет реальное свойство CSS border-radius, поэтому форма, которую вы видите, — это форма, которую будет отображать ваш браузер.
- 05
Скопируйте CSS
Нажмите Копировать, чтобы получить декларацию border-radius и вставьте её в вашу таблицу стилей.
Распространенные формы и когда использовать каждый режим
- 01Таблетка кнопка: универсальный % режим, установлен на 50% — всегда полная таблетка независимо от ширины кнопки
- 02Карточка с тонким скруглением: универсальный px режим, 8–16px — самая распространенная схема пользовательского интерфейса
- 03Асимметричный тег или этикетка: режим по углам, острый с одной стороны, скругленный с другой
- 04Аватар круг: универсальный % режим, 50% — масштабируется с контейнером изображения
- 05Органическая blob форма: эллиптический режим с различными значениями X/Y по углам
Мгновенный предпросмотр, ничего не загружается
Генератор border-radius полностью использует клиентскую сторону. Ползунки, переключатели режимов и изменения единиц все обновляют предпросмотр мгновенно без подъема по серверу. Нет аккаунта и нет ограничения скорости.
Инструмент работает во всех современных браузерах. Свойство border-radius — включая эллиптический синтаксис X/Y — поддерживается в каждой вечнозеленой версии Safari, Firefox, Edge и Chrome, поэтому вывод безопасно использовать без префиксов производителя или откатов.
Часто задаваемые вопросы о генераторе Border-Radius
В чем разница между px и % для border-radius?
Радиусы в пиксели абсолютны — 16px всегда 16px. Радиусы в процентах относительны к размерам элемента, поэтому 50% создает идеальный круг на квадратном ящике и эллипс на прямоугольнике.
Когда я должен использовать эллиптический режим?
Используйте эллиптический режим, когда вам нужен угол, который выпирает больше на одной оси — для горизонтальной таблетки, листовой формы или органического blob. CSS выражает это как X-радиусы / Y-радиусы в сокращении border-radius.
Почему мой радиус в процентах выглядит неправильно на неквадратном ящике?
Горизонтальные проценты относительны к ширине элемента; вертикальные — к высоте. На широком, коротком элементе углы растягиваются в эллипсы, а не в круглые дуги.
Работает ли вывод в каждом браузере?
Да — border-radius включая эллиптический синтаксис поддерживается в каждом современном браузере: все вечнозеленые версии Safari, Firefox, Edge и Chrome. Предвидинг производителей не нужно.
Как мне создать идеальный круг с border-radius?
Установите все углы на 50% в режиме процентов на квадратном элементе. Элемент также нуждается в равной ширине и высоте — используйте aspect-ratio: 1 / 1, если размер динамичен.