Как сделать овал в css

Овал можно сделать в CSS с помощью свойств border-radius и width/height. Для того, чтобы создать овал, нужно задать радиусы для двух противоположных углов равными половине ширины/высоты. Вот несколько примеров:

1. Создание овала с равными шириной и высотой:

div {
  width: 100px;
  height: 50px;
  border-radius: 50px/25px;
}

2. Создание овала внутри другого элемента:

.outer {
  width: 300px;
  height: 150px;
}
.inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

3. Создание овала с фоновым изображением:

div {
  width: 200px;
  height: 100px;
  border-radius: 100px/50px;
  background-image: url("image.jpg");
  background-size: cover;
}

В приведенных выше примерах мы указываем радиусы для двух противоположных углов с помощью значения border-radius, разделенного на две части через косую черту /. Первое значение указывает радиус для вертикального угла (в нашем примере это 100/2=50 пикселей), второе значение — для горизонтального угла (в нашем примере это 50/2=25 пикселей). При этом высота и ширина элемента определяются свойствами width и height.