Как изменить форму элемента CSS

С помощью свойства border-radius можно изменить форму элемента CSS. Это свойство задает радиус скругления углов элемента.

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

.element {
  border-radius: 50%;
}

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

.element {
  border-radius: 10px;
}

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

.element {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

Есть несколько других CSS-свойств, которые могут влиять на форму элемента, например, clip-path, shape-outside. Они стоит использовать с осторожностью, так как их поддержка браузерами может быть ограничена.