Бесплатный онлайн-инструмент
Генератор CSS border-radius
Настройте скругление каждого угла отдельно или всех сразу, в px или %. Живое превью, пресеты и готовый код к копированию.
Типовые значения
| Элемент | Радиус |
|---|---|
| Кнопки | 12px |
| Поля ввода | 12px |
| Карточки | 20px |
| Кнопка-таблетка | 999px |
| Аватар-круг | 50% |
Единый радиус во всём интерфейсе — признак аккуратного дизайна: выберите 2–3 значения (например, 12px для контролов и 20px для карточек) и придерживайтесь их. Тень для карточки настраивается в генераторе box-shadow.
Частые вопросы
Как задать разное скругление углам?
Свойство border-radius принимает до четырёх значений по часовой стрелке: верхний-левый, верхний-правый, нижний-правый, нижний-левый. Например, border-radius: 20px 0 20px 0 скругляет два противоположных угла. Снимите галочку «Все углы одинаково», чтобы настроить каждый угол отдельно.
В чём разница между px и % для скругления?
В пикселях радиус фиксированный, в процентах — считается от размера стороны элемента: 50% превращает квадрат в круг, а прямоугольник — в эллипс. Проценты удобны для аватаров и адаптивных блоков, пиксели — для кнопок и карточек. Переключить единицы можно прямо в инструменте.
Как сделать круг или таблетку?
Круг — border-radius: 50% у квадратного элемента (пресет «Круг»). «Таблетка» (полностью скруглённые торцы кнопки) — большое фиксированное значение, например border-radius: 999px: оно обрезается до половины меньшей стороны.
Что даёт запись через слэш, например 40px / 20px?
Эллиптическое скругление: первое значение — горизонтальный радиус, второе — вертикальный. Углы получаются не дугами окружности, а дугами эллипса — так делают «блобы» и органичные формы.
Обрезает ли border-radius содержимое?
Нет: скругляется только рамка и фон. Чтобы картинка или видео внутри тоже обрезались по радиусу, добавьте элементу overflow: hidden.