Проблема с закруглением границы в css

Question

Должно получиться как на картинке, но когда я использую этот css код,

    border: 10px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(129.57deg, #06f697 3.05%, #00bcdc 59.86%);
    opacity: 0.7;
    border-radius: 60px !important;

    background: #1c1644;
    opacity: 0.8;
    margin-top: 13px;
    width: 693px;
    padding-bottom: 40px;

происходит следующее

Answer 1

уберите

border-radius: 60px !important;

Answer 2

Вариант без использования border-image

.border-block {
  display: block;
  width: 100%;
  padding: 10px;
  background: linear-gradient(129.57deg, #06f697 3.05%, #00bcdc 59.86%);
  border-radius: 10px;
  border: 2px solid #00bcdc;
  box-sizing: border-box;
}

.border-block .wrap {
  display: block;
  width: 100%:
  height: 100%;
  background: #253a64;
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
  color: #fff;
  font-size: 140%;
  font-weight: bold;
}

.border-block .wrap > span {
  color: #06f697;
}

<div class="border-block">
  <div class="wrap">
    <span>Менеджеры по продажам и таргетологи (ВК, ФБ, Инста)</span> - 40К ₽, оплата 50/50<br>
    Гарантия перезамены 30 дней<br>
    Количество перезамен неограничего<br>
    Срок - 20 дней, штрафы за просрочку
  </div>
</div>

БЛОГ НА HUSL

Проблема с закруглением границы в css

Ответы (2 шт):