В этой статье
Понимание border-radius
Свойство CSS border-radius скругляет углы внешнего края границы элемента. Оно принимает от одного до четырёх значений для независимого управления каждым углом — верхний левый, верхний правый, нижний правый и нижний левый. Одно значение применяет одинаковый радиус ко всем четырём углам, а четыре значения позволяют создавать асимметричные формы.
Border-radius работает с любым элементом, имеющим видимые границы, фоны или тени. Свойство обрезает как фон, так и границу по скруглённой форме и правильно взаимодействует с box-shadow, outline и overflow.
Создание фигур с border-radius
Варьируя значения радиуса, можно создать широкий спектр геометрических фигур полностью на CSS. Генератор позволяет визуально настраивать каждый угол и сразу видеть результат.
- Форма пилюли — установите border-radius в 9999px для создания полностью скруглённых концов как у кнопки-капсулы. Это самый распространённый UI-паттерн для тегов, бейджей и кнопок-пилюль
- Круг — примените border-radius: 50% к квадратному элементу (равные ширина и высота). Процент вычисляется относительно каждого измерения, создавая идеальный круг
- Формы листа и капли — установите два противоположных угла на высокие значения, а два других на ноль (напр. border-radius: 60% 0 60% 0) для создания органических форм
Попробуйте бесплатно — без регистрации
Сгенерировать CSS Border Radius →Продвинутые эллиптические углы
Сокращённая запись border-radius поддерживает синтаксис со слешем (/), позволяющий определять отдельные горизонтальные и вертикальные радиусы для каждого угла. Это создаёт эллиптические кривые вместо круговых.
- Синтаксис со слешем — border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% означает, что горизонтальные радиусы все 50%, но вертикальные отличаются, создавая яйцевидную форму
- Свойства отдельных углов — border-top-left-radius: 50px 30px устанавливает эллиптический угол с 50px горизонтального и 30px вертикального радиуса
- Поведение процентов — при использовании процентов горизонтальный радиус относителен к ширине, а вертикальный — к высоте. Поэтому 50% / 50% на прямоугольнике создаёт эллипс, а не круг
Часто задаваемые вопросы
Использовать проценты или пиксели для border-radius?
Используйте проценты, когда хотите, чтобы радиус масштабировался с размером элемента (круги, эллипсы). Используйте пиксели для постоянного скругления (кнопки, карточки). Распространённый паттерн — 8px для UI-компонентов и 50% для аватаров.
Вызывает ли border-radius проблемы субпиксельного рендеринга?
На дисплеях с высоким разрешением малые значения border-radius (1-2px) могут выглядеть зубчатыми. Использование чуть большего радиуса (минимум 3-4px) может улучшить качество рендеринга.
Как border-radius взаимодействует с границами и outline?
Border-radius скругляет внешний край границы. При толстой границе внутренний радиус автоматически вычисляется как внешний-радиус минус ширина-границы. Outline не повторяет border-radius в большинстве браузеров. Box-shadow повторяет скруглённую форму.