Закругленные углы в CSS — border-radius

Отредактировано: 02 Февраля 2023

При помощи CSS свойства border-radius закругление углов можно сделать для любого элемента HTML-страницы. Для указания значения закругления можно использовать любые CSS единицы измерения, от px до rem.

Чтобы увидеть скругление в действии, можно создать блок с рамкой или фоном, и применить свойство border-radius. Закругление будет происходить по окружности с указанным радиусом. Например:

.element {
    width: 5rem;
    height: 5rem;
    background: #134d72;
    border-radius: 1rem;
}

Результат данной записи:

При увеличении размера скругления можно нарисовать круг:

.elementRound {
    width: 5rem;
    height: 5rem;
    background: #ffdb4d;
    border-radius: 50%;
}

Результат:

Можно закруглить края каждому углу отдельно, и задать им разный радиус:

.element2 {
    width: 5rem;
    height: 5rem;
    background: #134d72;
    border-radius: 50px 0;
}

.element3 {
  width: 5rem;
  height: 5rem;
  background: #ffdb4d;
  border-radius: 25px 100px 15px 200px;
}

Элемент 2:

Элемент 3:

Большой простор для творчества, не так ли? При умелом использовании совместно с js можно создать интересную бесформенную анимацию.

При помощи знака деления можно задавать эллиптическое скругление, при этом задается свое значение для горизонтальной и вертикальной полуосей эллипса. Сперва указывается горизонтальная ось, затем вертикальная.

.elementEllips {
    width: 15rem;
    height: 5rem;
    background: #ffdb4d;
    border-radius: 28rem/10rem;
}

.elementEllips2 {
    width: 5rem;
    height: 15rem;
    background: #134d72;
    border-radius: 10rem/30rem;
}

Эллипс при помощи свойства border-radius:

Эллипс 1:

Эллипс 2:

Не только лишь эллипс:

.ellement4{
   background: #134d72;
   border-radius: 30px 100% / 160px;
}

.ellement5{
   background: #ffdb4d;
   border-radius: 50% 20% / 10% 40%;
}

Элемент 4:

Элемент 5:

Значения можно указывать для каждого угла отдельно, используя обычную запись. Для указания разной длины сторон в этом случае используют двойную запись через пробел, без косой черты (слэша). Список свойств для скругления углов (сперва указывается верх или низ, а затем сторона):

• border-top-left-radius, border-start-start-radius — для верхнего левого угла;
• border-top-right-radius, border-start-end-radius — для верхнего правого угла;
• border-bottom-left-radius, border-end-start-radius — для нижнего левого угла;
• border-bottom-right-radius, border-end-end-radius — для нижнего правого угла.  

.elementTopLeft {
    background: #ffdb4d;
    border-top-left-radius: 100px;
}

.elementEndEnd {
    background: #134d72;
    border-end-end-radius: 80px 160px;
}

Сверху слева:

Снизу в конце: