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

Базовый синтаксис выглядит так:

.radius {
    border-radius: 10px;
}

Посмотрим, как это выглядит на codepen:

Теперь попробуем разобраться с термином радиус. Допустим, мы нарисовали окружность:

Радиус - расстояние от центра окружности до любой точки, размещенной на окружности. Итак, мы знаем, что такое радиус. Теперь представьте, что Вы обрезали углы HTML-элемента по шаблону, который является частью окружности. Вот, собственно, и все.

А теперь рассмотрим вопрос подробнее.

Следует помнить, что border-radius является короткой записью четырех свойств border-top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius. Отсчет идет от верхнего левого угла по часовой стрелке.

Рассмотрим на примерах:

.border {
    /* верхний левый и нижний правый | верхний правый и нижний левый */
    border-radius: 10px 10px;
    
    /* верхний левый | верхний правый и нижний левый | нижний правый */
    border-radius: 10px 10px 10px;
    
    /* верхний левый | верхний правый | нижний правый | нижний левый */
    border-radius: 10px 10px 10px 10px;
}

Таким образом, можно установить различные параметры скругления для каждого угла блока, что дает определенную гибкость в реализации дизайна HTML-элемента.

Существует более продвинутый способ использования border-radius - это использование второго радиуса. Что это значит? Представьте, что каждый угол блока вы обрезаете по шаблону, состоящему из двух окружностей.

.radius {
    border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;

    /*
    читается следующим образом:
    top-left-up top-right-up bottom-right-down bottom left-down /
    top-left-left top-right-right bottom-right-right bottom-left-left
    */
}

А теперь пример на codepen:

И наконец, как создать круглый блок?

Для этого потребуется HTML-элемент с одинаковыми width и height и border-radius: 50%.

Вот пример на codepen:

Полезная информация

1. Border radius generator
2. MDN

Спасибо за внимание.