Как правильно подойти к вопросу: создание элемента с необычной формой и прозрачным фоном и рамкой?

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

<div class="module_profile" id="moduleProfile"> <div class="mp_header">div> </div>

.module_profile { position: relative; top: 0%; left: 50%; transform: translate(-50%, 20%); padding: 8px 8px 10px 8px; height: 600px; width: 600px; background: linear-gradient(135deg, var(--color-purple-0) 0%, var(--color-blue-1) 50%, var(--color-blue-0) 100%); border: 3px solid var(--color-purple-4); border-radius: 25px; z-index: 1000; } .mp_header { position: relative; top: 0%; left: 50%; transform: translate(-50%, 0%); margin-bottom: 5px; height: 150px; width: 580px; padding: 5px 3px; background: color-mix(in srgb, var(--color-text-0) 3.5%, transparent); clip-path: path("M 0,15 A 15,15 0,0,1 15,0 L 565,0 A 15,15 0,0,1 580,15 L 580,75 A 15,15 0,0,1 565,90 L 165,90 A 15,15 0,0,0 150,105 L 150,135 A 15,15 0,0,1 135,150 L 15,150 A 15,15 0,0,1 0,135 Z"); overflow: hidden; }

Должно быть так
По вводным: как такое вообще реализовать только если в Figma. (Но раз там такое можно получить то и с помощью кода наверно тоже)