Реализация рамки для элемента со сложной формой и прозрачным фоном

При разработке элемента со сложной формой и прозрачным фоном возникает задача создания корректной рамки. Известный подход - создание увеличенной копии элемента позади основного - сталкивается с проблемой: невозможно просто "вырезать" внутреннюю часть рамки, чтобы оставить только обводку.

Суть проблемы

Имеется элемент с нестандартной формой, заданной свойством clip-path. Его фон прозрачен или полупрозрачен. Требуется добавить стилизованную рамку, повторяющую контур этого элемента. Прямое применение border не работает из-за сложной геометрии clip-path.

Предложенное решение и его недостаток

Идея создать второй, фоновый элемент, идентичный первому, увеличить его размер и поместить позади - технически верна. Однако ключевая сложность заключается в том, чтобы у этого фонового слоя осталась только рамка (обводка), а его "сердцевина" была невидимой, позволяя просвечивать основной контент или фон страницы.

Пример кода

Исходная структура и стили элемента:

<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, его можно воспроизвести и средствами кода. Основные подходы:

• Использование псевдоэлемента с mask: Создать псевдоэлемент ::before с увеличенной копией пути clip-path и применить CSS-маску (mask или mask-composite), чтобы "вычесть" внутреннюю область.
• SVG и stroke: Реализовать форму как SVG-путь, где рамка задаётся свойством stroke, а заливка (fill) - прозрачная или отсутствует.
• Filter: drop-shadow: Для простых случаев может подойти CSS-фильтр drop-shadow, создающий тень, повторяющую форму альфа-канала элемента. Однако это не настоящая рамка, а тень, и управление её свойствами ограничено.

Задача сводится к выбору наиболее подходящего метода, который точно воспроизведёт задуманный дизайн и будет поддерживаться целевыми браузерами.