Border с выраженной шириной по середине блока

Question

Подскажите пожалуйста, как корректно сделать вот такую рамку вокруг блока? Нашла свойство, но оно не работает.

border: 2px solid;
border-image-source: conic-gradient(from 135.07deg at 50.11% 50%, rgba(255, 255, 255, 0) 0deg, #FFFFFF 72deg, rgba(255, 255, 255, 0) 147.94deg, #FFFFFF 164.12deg, rgba(255, 255, 255, 0) 180.03deg, #FFFFFF 254.77deg, rgba(255, 255, 255, 0) 328.04deg, #FFFFFF 345.01deg, rgba(255, 255, 255, 0) 360deg);

Answer 1

Максимальной похожести можно достичь, расставив по периметру радиальные градиенты:

body { margin: 0; background: 0 0 / 100vw 100vh linear-gradient(to bottom right, #815bcb 30%, #7b5690, #815bcb 50%); }

figure {
  margin: 30px auto;
  width: fit-content;
  padding: 0.5em 1em;
  border: 3px solid #ffffff06;
  border-radius: 9px;
  box-sizing: border-box;
  font: bold 22px sans-serif;
  color: #fff;
  background-color: #ffffff08;
  background-image: radial-gradient(closest-side at 50% 3px, #ffff, #fff0 80%), radial-gradient(closest-side at calc(100% - 3px) 50%, #ffff, #fff0 90%), radial-gradient(closest-side at 50% calc(100% - 3px), #ffff, #fff0 80%), radial-gradient(closest-side at 3px 50%, #ffff, #fff0 90%);
  background-position: 50% -6px, calc(100% + 6px) 50%, 50% calc(100% + 6px), -6px 50%;
  background-repeat: no-repeat;
}

<figure>Системы компьютерного зрения</figure>

БЛОГ НА HUSL

Border с выраженной шириной по середине блока

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