Как закруглить углы в css

Чтобы закруглить углы одного или нескольких элементов на веб-странице, можно использовать свойство border-radius. Это свойство позволяет задать радиус закругления углов в пикселях или процентах.

Вот пример, как можно использовать свойство border-radius:

/* Закругление всех углов */
div {
    border-radius: 10px;
}

/* Закругление левых верхнего и нижнего углов */
div {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

/* Закругление правых верхнего и нижнего углов */
div {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

В примере выше, мы использовали свойство border-radius, чтобы закруглить углы элемента div. Мы задали радиус закругления в 10 пикселей. Также мы использовали свойства border-top-left-radius, border-bottom-left-radius, border-top-right-radius и border-bottom-right-radius, чтобы задать разный радиус закругления углов в каждом углу элемента.

Если вы хотите задать одинаковый радиус закругления для всех углов, то можно использовать сокращенную запись:

div {
    border-radius: 10px 20px;
}

В примере выше, мы задали одинаковый радиус закругления в 10 пикселей для верхних левого и правого углов, и в 20 пикселей для нижних левого и правого углов.

Также можно задавать радиус закругления в процентах:

div {
    border-radius: 50%;
}

В примере выше, мы задали радиус закругления в 50 процентов, что превратит элемент в круг.