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

Визуально настройте CSS border-radius — управляйте всеми четырьмя углами по отдельности или вместе. Результат отображается в реальном времени для точной настройки скругления.

Студия · нейтральное окружение

Режим

Радиус20px

CSS

Возможности

Настройка всех четырёх углов

Единый или раздельный режим

Ползунок и ввод числа

Живой предпросмотр и CSS-код

Как использовать

1. Тяните ползунок радиуса — нейтральная карточка показывает углы в реальном размере.

2. Переключитесь на «По углам», чтобы настроить каждый угол отдельно.

3. Скопируйте CSS — используется кратчайшая корректная запись.

Об этом инструменте

Скруглённые углы — это одна строка CSS, но подобрать значение проще, когда его видно. Этот генератор показывает border-radius на нейтральной карточке в натуральную величину, пока вы двигаете один ползунок или настраиваете каждый угол отдельно. Затем он записывает самое короткое корректное объявление: одно значение, если все углы одинаковы, и два, три или четыре — если различаются, в порядке верхний левый, верхний правый, нижний правый, нижний левый. Небольшие радиусы 4–8 px подходят кнопкам и полям ввода, 12–24 px делают карточки дружелюбнее, а очень большие значения превращают невысокие элементы в «таблетки». Переключите фон сцены, чтобы увидеть, как форма смотрится на светлых и тёмных поверхностях, прежде чем копировать CSS в таблицу стилей.

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

В каком порядке идут четыре значения border-radius?

По часовой стрелке от верхнего левого угла: верхний левый, верхний правый, нижний правый, нижний левый. При двух значениях первое относится к верхнему левому и нижнему правому углам, второе — к верхнему правому и нижнему левому.

Как сделать кнопку-«таблетку» или круг?

Для «таблетки» задайте радиус не меньше половины высоты элемента или просто очень большое значение вроде 9999px. Для круга сделайте ширину и высоту элемента одинаковыми и задайте border-radius: 50%.

Почему скруглённый угол обрезается или сквозь него виден фон?

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

Можно ли сделать эллиптические углы?

CSS позволяет задавать горизонтальный и вертикальный радиусы отдельно через косую черту, например border-radius: 50% / 20%. Этот генератор ориентирован на круговые углы в пикселях, которых хватает для большинства интерфейсных задач; синтаксис с косой чертой для особых форм можно дописать вручную.

Влияет ли border-radius на раскладку или область клика?

Нет. Он меняет только то, как элемент отрисовывается и обрезается. В раскладке элемент сохраняет прямоугольную рамку, а клики в прозрачных углах по-прежнему засчитываются элементу.

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

Возможности

Как использовать

Об этом инструменте

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

Похожие инструменты