Генератор скругления углов CSS border-radius
Двигайте ползунки четырёх углов, держите их связанными или настраивайте по отдельности, а для «капель» и необычных форм включите эллиптические углы. CSS сокращается автоматически.
Работает в браузере: всё, что вы вводите, никуда не отправляется.
Как пользоваться
- Выберите px или %.
- Когда включено Связать все углы, один ползунок двигает все четыре. Выключите, чтобы настроить каждый угол.
- Включите Эллиптические углы, чтобы у каждого угла появился второй ползунок — вертикальный радиус.
- Нажмите Копировать и вставьте правило.
Что означает код
По умолчанию получается border-radius: 24px; — все четыре угла скруглены радиусом 24 px. border-radius: 10px 20px; скругляет левый верхний и правый нижний углы на 10 px, а два других — на 20 px. border-radius: 50% / 25%; даёт эллиптические углы.
Пример
Кнопка-«таблетка»: выберите px, свяжите углы и сдвиньте ползунок до максимума (200 px) — браузер сам ограничит радиус половиной высоты.
Советы
- Для идеального круга возьмите квадратный блок и
border-radius: 50%.
- Если обнулить только часть углов, получатся вкладки и «облачка» для реплик.
- Максимум ползунков — 200 px или 100 %.
Частые вопросы
В каком порядке идут четыре значения?
Левый верхний, правый верхний, правый нижний, левый нижний — по часовой стрелке от левого верхнего. Повторы инструмент сокращает: четыре одинаковых значения становятся одним, а пары «левый верхний = правый нижний» и «правый верхний = левый нижний» — двумя.
Что значит косая черта?
В эллиптическом режиме у радиуса есть горизонтальная и вертикальная части, они пишутся как «горизонтальный / вертикальный». Например, 50% / 25% делает каждый угол эллипсом вдвое ниже его ширины. Если части равны, черта не пишется.
Что выбрать — px или проценты?
Пиксели дают одинаковый угол при любом размере блока. Проценты масштабируются вместе с блоком: 50% у квадрата дают круг, у прямоугольника — эллипс.
Что будет, если радиусы больше блока?
Браузер уменьшает все радиусы в одинаковое число раз, пока соседние углы не перестанут накладываться, поэтому большие значения форму не ломают.