Softonic

Генератор border-radius для CSS

Шаг 1 / 2 Создать CSS
Результаты

border-radius кажется простым, пока не попробуешь объяснить, почему 50% на квадрате даёт круг, а 50% на прямоугольнике, овал. Этот генератор позволяет ввести значение для каждого из четырёх углов, выбрать единицу измерения (px, % или rem) и скопировать точную сокращённую запись, которую он создаёт. Удобен для формы кнопок, скругления карточек, кнопок-«таблеток» (pill) и асимметричных углов.

Как составить border-radius

  1. 1

    Задайте каждый угол

    Введите радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов.

  2. 2

    Выберите единицу

    Пиксели px (фиксированный размер), проценты % (относительно элемента) или rem (относительно корневого размера шрифта).

  3. 3

    Создайте CSS

    Нажмите кнопку Generate CSS, чтобы получить сокращённую запись.

  4. 4

    Скопируйте правило

    Скопируйте сокращённую запись `border-radius` и вставьте её в свою таблицу стилей.

Порядок значений в сокращённой записи

border-radius: top-left top-right bottom-right bottom-left;

Так же, как у margin / padding: по часовой стрелке, начиная с верхнего левого угла. Пропущенные значения зеркально повторяют противоположный угол. Поэтому border-radius: 10px 20px; означает 10px для верхнего левого и нижнего правого углов, 20px, для верхнего правого и нижнего левого.

Что этот генератор не делает

Он задаёт по одному радиусу на угол, поэтому не создаёт эллиптических углов (двухзначной формы со слешем, например border-radius: 20px 10px / 5px 15px;) и развёрнутых свойств вроде border-top-left-radius. Если они нужны, напишите CSS вручную.

Проценты и пиксели

Единица Поведение
px Фиксированное значение, не масштабируется вместе с размером элемента
% Процент от ширины элемента (по горизонтали) и высоты (по вертикали)
em Масштабируется вместе с размером шрифта элемента
rem Масштабируется вместе с корневым размером шрифта

50% на квадратном элементе = круг. На прямоугольнике 200×100 значение 50% даёт горизонтальный радиус 100px и вертикальный 50px, это эллипс.

Распространённые формы

Форма CSS
Круг (квадрат) border-radius: 50%;
Таблетка (pill) border-radius: 9999px; (любое значение ≥ половины высоты)
Скруглённая карточка border-radius: 8px; или 12px
Чат-пузырь border-radius: 18px 18px 0 18px; (хвостик в правом нижнем углу)
Лёгкое скругление border-radius: 2px; или 4px

Правило «половины высоты» для кнопок-«таблеток»

Кнопка-«таблетка», это прямоугольник, у которого левый и правый торцы представляют собой идеальные полукруги. Чтобы надёжно этого добиться, задайте border-radius не менее половины высоты элемента. Использовать 9999px (или любое очень большое значение) безопасно, потому что браузер ограничивает радиус реальной геометрией.

Взаимодействие с overflow

По умолчанию border-radius обрезает только фон, рамку и тень. Чтобы обрезать дочерние элементы (изображения, вложенные элементы) по скруглённой форме, добавьте:

overflow: hidden;

или используйте isolation: isolate + overflow: hidden, чтобы заодно ограничить контексты наложения (stacking contexts).

Заметка о доступности

Сам по себе border-radius не создаёт проблем с доступностью, но чрезмерное скругление интерактивных элементов (таблеток, чипов) не должно уменьшать область нажатия. Независимо от скругления углов, сохраняйте у кнопок размер не менее 44×44px (рекомендация WCAG).

Часто задаваемые вопросы

Потому что процентный border-radius измеряется как «% от ширины» по горизонтали и «% от высоты» по вертикали, на неквадратном элементе это даёт эллипс. Для круга элемент должен быть квадратным или нужно использовать пиксельные значения, соответствующие его размерам.

По умолчанию, только фон, рамку и тень. Дочерние элементы не обрезаются, пока вы не добавите родителю overflow: hidden.

Он анимируется между числовыми значениями: transition: border-radius 200ms; работает и для пикселей, и для процентов. Анимация между сложной эллиптической сокращённой записью и простым радиусом может давать неожиданные промежуточные кадры; если выглядит странно, протестируйте и упростите начальное и конечное состояния.

Спецификация не задаёт верхнего предела, но браузеры ограничивают эффективный радиус половиной короткой стороны элемента. border-radius: 9999px на кнопке высотой 40px даёт «таблетку», браузер молча ограничивает радиус до 20px.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Генератор цветовой палитры

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.