Как сделать скругленные края в css

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

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

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

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

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

.my-div {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

Этот код задает скругление углов в разных размерах, чтобы создать эффект более тонкой верхней части и более толстой нижней части блока.

Также можно задать круглую форму для элемента, используя радиус, равный половине ширины или высоты элемента:

.my-circle {
  width: 100px; /* ширина элемента */
  height: 100px; /* высота элемента */
  border-radius: 50%; /* круглый радиус, равный половине ширины и высоты */
}

Этот код создает круглый элемент, используя радиус, равный половине ширины и высоты элемента.