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

Чтобы скруглить углы элемента в CSS, можно использовать свойство «border-radius».

Синтаксис свойства «border-radius» следующий:

border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

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

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

.my-element {
  border-radius: 10px;
}

А чтобы скруглить только левый верхний и правый нижний углы элемента на 20 пикселей, можно использовать следующие правила:

.my-element {
  border-radius: 20px 0 20px 0;
}

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

Также можно использовать короткий синтаксис, указав только два значения: для горизонтальных и вертикальных углов соответственно. Например:

.my-element {
  border-radius: 10px 20px;
}

Здесь мы скругляем левые и правые углы элемента на 10 пикселей и верхние и нижние углы на 20 пикселей.