CSS Border Radius: скругление углов элементов
Свойство border-radius — одно из самых часто используемых в CSS. Оно позволяет скруглять углы элементов, превращая прямоугольники в элементы с мягкими формами: от слегка скруглённых карточек до идеальных кругов и сложных органических фигур.
Синтаксис border-radius
border-radius принимает от одного до четырёх значений:
border-radius: 10px;— все четыре угла одинаковые.border-radius: 10px 20px;— верхний-левый и нижний-правый = 10px; верхний-правый и нижний-левый = 20px.border-radius: 10px 20px 30px;— верхний-левый = 10px; верхний-правый и нижний-левый = 20px; нижний-правый = 30px.border-radius: 10px 20px 30px 40px;— каждый угол отдельно (по часовой стрелке от верхнего левого).
Эллиптические углы
Через символ / можно задать разные горизонтальные и вертикальные радиусы, создавая эллиптическое скругление:
border-radius: 50px / 25px;
Горизонтальный радиус 50px, вертикальный 25px — получается вытянутое скругление. Каждый угол может иметь свою пару значений.
Популярные формы
- Круг:
border-radius: 50%;(элемент должен быть квадратным). - Таблетка (pill):
border-radius: 9999px;— максимальное скругление для прямоугольника. - Карточка Material Design:
border-radius: 8px;или12px;. - Капля:
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;. - Скругление сверху:
border-radius: 10px 10px 0 0;.
Проценты vs пиксели
Проценты вычисляются от размеров элемента: горизонтальный радиус — от ширины, вертикальный — от высоты. Поэтому border-radius: 50% на квадрате даёт круг, а на прямоугольнике — овал. Пиксели дают фиксированное скругление, не зависящее от размера элемента.
Практические советы
- Для кнопок и инпутов используйте одинаковый border-radius (6–8px) для визуальной консистентности
- Для аватаров и иконок в круге —
border-radius: 50%+overflow: hidden - Не забывайте про
overflow: hiddenесли внутри есть изображения — они могут выходить за скруглённые углы
Заключение
Подберите идеальное скругление визуально в нашем генераторе CSS Border Radius. Для создания теней и градиентов используйте CSS Shadow и CSS Gradient генераторы.