Как закруглить углы фона контейнера?

Для закругления углов фона контейнера существует несколько способов. Рассмотрим два наиболее распространенных варианта.

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

.container {
  background-color: #f2f2f2;
  border-radius: 10px;
}

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

Второй способ - использование псевдоэлементов ::before и ::after. С помощью этих псевдоэлементов можно добавить дополнительные элементы перед и после основного контейнера и применить к ним закругление углов. Например:

.container {
  background-color: #f2f2f2;
  position: relative;
}

.container::before,
.container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
}

.container::before {
  left: 0;
  background-color: #f2f2f2;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.container::after {
  right: 0;
  background-color: #f2f2f2;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

В этом примере мы добавляем два псевдоэлемента - ::before и ::after, устанавливаем им фон с заданным цветом и закругленные углы только в нужных нам местах, чтобы они симулировали закругление углов фона основного контейнера.

Какой из этих способов выбрать зависит от ваших предпочтений и требований проекта.