With a subscription — no extra charge. Paid Site Control from 990 ₽/mo includes local tools with unlimited manual runs. The volume limit for each run is shown on the tool page. Paid AI features and API integrations are charged separately.

CSSБесплатно

CSS Border Radius Generator

Q: Как сделать круглый элемент?

Задайте border-radius: 50% на квадратный элемент (равные width и height). Для прямоугольника 50% создаст эллипс. Для «таблетки» (pill shape) используйте border-radius: 9999px — скругление будет максимальным по короткой стороне.

Q: Влияет ли border-radius на overflow?

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

Визуальный генератор CSS border-radius с поддержкой расширенного синтаксиса

Превью

Углы

Связать углыРасширенный

Верхний левый: 12px

Верхний правый: 12px

Нижний правый: 12px

Нижний левый: 12px

Внешний вид

Фон

#3B82F6

Граница

#1D4ED8

Ширина (px)

Высота (px)

CSS код

Свойство border-radiusCSS

border-radius: 12px;

Пресеты

About CSS Border Radius Generator

CSS Border Radius Generator — визуальный конструктор для настройки скругления углов элементов. Управляйте каждым углом отдельно, используйте готовые пресеты или создавайте сложные формы с эллиптическим border-radius.

Настройка каждого угла отдельно

Поддержка эллиптического border-radius (два значения на угол)

Готовые пресеты (pill, circle, blob, leaf)

Мгновенный визуальный предпросмотр

Экспорт сокращённого и полного CSS

Копирование кода в один клик

Frequently asked questions

Как задать скругление для каждого угла отдельно?

Используйте полную запись: border-radius: top-left top-right bottom-right bottom-left. Например, border-radius: 10px 0 10px 0 скруглит только верхний левый и нижний правый углы. Для одного угла: border-top-left-radius: 20px.

Что такое эллиптический border-radius?

Через слэш можно задать горизонтальный и вертикальный радиус отдельно: border-radius: 50px / 25px создаёт овальное скругление. Полная запись: border-radius: h1 h2 h3 h4 / v1 v2 v3 v4. Это позволяет создавать органические формы вроде «капли» или «яйца».

Как сделать круглый элемент?

Влияет ли border-radius на overflow?

Поддерживается ли border-radius во всех браузерах?

border-radius поддерживается во всех современных браузерах без префиксов. Эллиптические значения и процентные единицы тоже работают повсеместно. Единственное ограничение — старые версии IE (8 и ниже), которые уже не актуальны.

Useful articles

Guides and tips for this topic

All articles