Как сделать скруглённые углы у элемента (border-radius)?
Нужно скруглить углы у картинки и у блока. Знаю про border-radius, но не понимаю, как скруглить только пару углов или сделать идеальный круг. Как этим управлять?
2 ответа
За скругление отвечает border-radius. В простом виде одно значение скругляет все четыре угла:
.box { border-radius: 12px; }
Чтобы скруглить отдельные углы, перечисляйте по часовой стрелке начиная с левого-верхнего: верх-лево, верх-право, низ-право, низ-лево.
/* только верхние углы */
.box { border-radius: 12px 12px 0 0; }
/* или адресно */
.box {
border-top-left-radius: 12px;
border-bottom-right-radius: 12px;
}
Для идеального круга возьмите квадратный элемент и радиус 50%:
.avatar {
width: 80px;
height: 80px; /* ширина = высота! */
border-radius: 50%;
object-fit: cover; /* если это картинка — не искажать */
}
Если стороны разные, border-radius: 50% даст эллипс, а не круг — поэтому важна именно квадратная форма.
Для «таблетки» (полностью круглые торцы у прямоугольника) ставьте большой радиус, например border-radius: 999px.
Нюанс: если у элемента есть фон или картинка, выходящие за границу, добавьте overflow: hidden родителю — иначе содержимое торчит из-под скруглённых углов.
Маленькое дополнение: border-radius можно задавать в процентах от размеров блока, а не только в пикселях. И через слэш указываются разные горизонтальный/вертикальный радиусы: border-radius: 20px / 40px даёт «вытянутые» углы. Для большинства задач хватает одного значения в px, но эти приёмы пригодятся для нестандартных форм.