Как сделать прямоугольник с закруглеными углами во внутрь?

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

.rectangle {
  width: 200px;
  height: 100px;
  background-color: #f1f1f1;
  border-radius: 20px;
  overflow: hidden;
}

.rectangle-content {
  margin: -20px;
  padding: 20px;
}

В данном примере, у нас есть <div> элемент с классом .rectangle, который представляет прямоугольник с закругленными углами. Задаем ширину и высоту элемента через свойства width и height. Фоновый цвет установлен на свойстве background-color.

Затем мы используем свойство border-radius со значением 20px. Это значение указывает, насколько сильно должны быть закруглены углы нашего прямоугольника. Большее значение будет создавать более явные закругления.

Чтобы создать эффект закругленных углов внутрь, мы добавляем элемент .rectangle-content внутри нашего .rectangle. Задаем внутренние отступы с помощью свойства padding и отрицательные внешние отступы через свойство margin. Отрицательные внешние отступы позволяют "затянуть" контент внутрь элемента и скрыть лишние фрагменты, создавая эффект закругленных углов внутрь.