Генератор border-radius
Задайте каждый угол и скопируйте CSS.
- Работает в вашем браузере — текст никуда не отправляется
- Без регистрации и квот, пользуйтесь бесплатно сколько угодно
Как это работает
border-radius прост, пока не понадобится скруглить три угла и оставить один прямым — тогда всем приходится искать порядок четырёх значений.
Порядок — раз и навсегда
Верхний левый, верхний правый, нижний правый, нижний левый — по часовой стрелке, начиная с верхнего левого. Тот же порядок по часовой стрелке от верхнего левого угла действует и для сокращённых записей margin, padding и border, так что его стоит один раз выучить наизусть.
Пиксели или проценты
Пиксели дают одинаковую кривизну независимо от размера элемента. Проценты считаются от собственной ширины и высоты элемента, поэтому кривизна масштабируется, а радиус 50% на квадрате даёт идеальный круг — стандартный приём для круглых аватаров.
Форма «таблетки»
Радиус больше половины высоты элемента ограничивается ровно половиной, поэтому border-radius: 999px надёжно даёт «таблетку» при любой высоте. Это надёжнее, чем вычислять нужное значение, потому что продолжает работать при изменении содержимого.
Когда углы выглядят неправильно у вложенных элементов
Скруглённому блоку внутри другого скруглённого блока нужен меньший радиус у внутреннего — на величину отступа между ними, иначе кривые не будут концентрическими. Это мелочь, благодаря которой карточки выглядят аккуратно сделанными.
Генератор border-radius: вопросы
В каком порядке идут четыре значения?
Верхний левый, верхний правый, нижний правый, нижний левый — по часовой стрелке от верхнего левого угла.
Как сделать идеальный круг?
border-radius: 50% для элемента, который строго квадратный.
Как сделать кнопку-«таблетку»?
Используйте большое значение, например 999px. Браузеры ограничивают его половиной высоты, так что это работает при любом размере.
Что использовать — пиксели или проценты?
Пиксели — для постоянной кривизны; проценты — когда нужно, чтобы она масштабировалась вместе с элементом.
Работает ли это везде?
Да. border-radius поддерживается без префикса уже более десяти лет.