Скругление углов (border-radius) в CSS
Вы умеете рисовать острую границу вокруг коробки. Часто дизайн хочет более мягкие углы — дружелюбные карточки, современные кнопки, аватары, которые читаются как круги. Это border-radius: насколько сильно закругляется каждый угол.
Что делает border-radius?
border-radius скругляет углы бокса границы. Кривая действует на линию границы и фон (и обычно обрезает изображение/overflow). Большая длина — более круглый угол. Частые единицы: px или %.
Одно значение — все четыре угла
Повседневный старт: одна длина для каждого угла.
Одинаковый радиус на всех углах
css.card {
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: 1rem;
background-color: #ffffff;
}Что нужно заметить
Граница следует кривой, белая заливка остаётся внутри округлой формы. Радиус — не вторая граница: он формирует существующую коробку.
Сокращение: сколько значений?
Можно передать одну, две, три или четыре длины. Порядок углов фиксирован.
📊 Число значений border-radius
| Значения | Смысл | Повседневная заметка |
|---|---|---|
| 1 | Все четыре угла одинаковы | Мягкие карточки и панели |
| 2 | Верх-лево + низ-право, затем верх-право + низ-лево | Диагональные пары |
| 3 | Верх-лево, верх-право + низ-лево, низ-право | Реже — знайте, что существует |
| 4 | Верх-лево, верх-право, низ-право, низ-лево | Полный контроль, по часовой от верх-лево |
Четыре угла, четыре числа
Когда каждому углу нужна своя кривая, перечислите четыре значения по часовой стрелке, начиная с верхнего левого.
Четыре разных угла
css.badge {
border: 2px solid #0f766e;
border-radius: 16px 4px 16px 4px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}Два значения — диагональные пары
Две длины связывают противоположные углы: первая — верх-лево и низ-право; вторая — верх-право и низ-лево.
Двузначный диагональный радиус
css.tile {
border: 1px solid #94a3b8;
border-radius: 20px 4px;
padding: 1rem;
background-color: #f8fafc;
}Кнопки-капсулы
Большой радиус (часто половина высоты или крупное значение вроде 999px) превращает прямоугольник в капсулу — привычно для чипов и главных действий.
Кнопка в форме капсулы
css.btn-pill {
border: none;
border-radius: 999px;
padding: 0.6rem 1.25rem;
background-color: #0f766e;
color: #ffffff;
}Круглые аватары
Для настоящего круга дайте коробке равные ширину и высоту, затем border-radius: 50%. На не квадратной коробке 50% даёт эллипс.
Круг с радиусом 50 процентов
css.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid #0f766e;
background-color: #ccfbf1;
overflow: hidden; /* обрезает фото внутри круга */
}Попробуйте сами
- Смягчите карточку с границей через
border-radius: 12px. - Оформите бейдж с четырьмя разными радиусами углов.
- Поставьте двузначный радиус на плитку и заметьте диагональные пары.
- Соберите кнопку-капсулу с
border-radius: 999px. - Сделайте аватар 64×64 с
border-radius: 50%— затем попробуйте50%на широком прямоугольнике и сравните.
Частые ошибки
- Огромный радиус на пустой коробке без границы и цвета и удивление, почему «ничего не видно»
50%на широком прямоугольнике в ожидании идеального круга (получится эллипс)- Забыть равные ширину и высоту для круга
- Думать, что
border-radiusзаменяетborder— чтобы ясно видеть кривую, всё ещё нужны граница или заливка - Путать порядок углов (четыре значения: по часовой от верх-лево)
Кратко
border-radiusскругляет углы коробки- Одно значение смягчает все; четыре значения управляют каждым углом
- Два значения связывают противоположные углы по диагонали
- Большие радиусы делают капсулы;
50%на квадрате — круг - Кривая обрезает границу и фон вместе
- Практикуйте карточку, капсулу и аватар, пока формы не станут очевидными
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху