Как сгладить углы в CSS

Вы можете использовать свойство border-radius для сглаживания углов в CSS. Оно позволяет задать радиус скругления углов для элемента. Например:

.box {
  border-radius: 10px;
}

В этом примере мы задаем радиус скругления углов для элемента с классом .box равным 10px. В результате, углы этого элемента будут сглажены.

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

.box {
  border-radius: 10px 20px 30px 40px;
}

Здесь первое значение устанавливает радиус для левого верхнего угла, второе для правого верхнего угла, третье для правого нижнего угла и четвертое для левого нижнего угла.

Кроме того, вы можете использовать ключевые слова border-radius для задания круглого (или овального) элемента:

.circle {
  border-radius: 50%;
}

.oval {
  border-radius: 50% / 25%;
}

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

Заметьте, что свойство border-radius поддерживается во всех современных браузерах, в том числе в Internet Explorer 9 и выше.