CSS Border Radius Generator
Визуальный генератор CSS border-radius с поддержкой расширенного синтаксиса
Превью
Углы
Внешний вид
CSS код
border-radius: 12px;Пресеты
О сервисе CSS Border Radius Generator
CSS Border Radius Generator — визуальный конструктор для настройки скругления углов элементов. Управляйте каждым углом отдельно, используйте готовые пресеты или создавайте сложные формы с эллиптическим border-radius.
Часто задаваемые вопросы
Используйте полную запись: border-radius: top-left top-right bottom-right bottom-left. Например, border-radius: 10px 0 10px 0 скруглит только верхний левый и нижний правый углы. Для одного угла: border-top-left-radius: 20px.
Через слэш можно задать горизонтальный и вертикальный радиус отдельно: border-radius: 50px / 25px создаёт овальное скругление. Полная запись: border-radius: h1 h2 h3 h4 / v1 v2 v3 v4. Это позволяет создавать органические формы вроде «капли» или «яйца».
Задайте border-radius: 50% на квадратный элемент (равные width и height). Для прямоугольника 50% создаст эллипс. Для «таблетки» (pill shape) используйте border-radius: 9999px — скругление будет максимальным по короткой стороне.
Да, при overflow: hidden содержимое обрезается по скруглённым углам. Это стандартный приём для карточек с изображениями. Без overflow: hidden дочерние элементы могут «выступать» за скруглённые углы, особенно если у них свой фон.
border-radius поддерживается во всех современных браузерах без префиксов. Эллиптические значения и процентные единицы тоже работают повсеместно. Единственное ограничение — старые версии IE (8 и ниже), которые уже не актуальны.
Полезные статьи
Руководства и советы по теме
Связанные инструменты
Другие полезные сервисы reChecker