Как достичь такого же border-radius?

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

```css
.element {
  border-radius: 10px;
}
```

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

```css
.element {
  border-radius: 50%;
}
```

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

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

```css
.element {
  border-radius: 10px;
}

@media (max-width: 600px) {
  .element {
    border-radius: 30px;
  }
}

@media (max-width: 400px) {
  .element {
    border-radius: 50px;
  }
}
```

Это пример адаптивного border-radius, где для ширины экрана менее 600 пикселей используется радиус 30 пикселей, а для ширины экрана менее 400 пикселей - радиус 50 пикселей. Вы можете настроить эти значения в зависимости от ваших потребностей и медиа-запросов.

Плюсик можно добавить с помощью свойства before. Для адаптации можно использовать определенные брейкпоинты, в целом нет проблем для адаптации. Дополнительный блок box2 можно прикрепить снизу и добавить границу. Если дизайнер не знаком с ограничениями современного CSS и не собирается разбираться в них, то можно использовать свойства clip-path и svg.