Как сделать внутренний Div прозрачным с округлой границей? ⇐ Html

[Anonymous]

Мне нужна помощь или идеи о том, как сделать интерьер, прозрачный с округлой границей. < /p>
Вот изображение примера того, что мне нужно. В этом случае значение серого определяется вручную.
ожидаемый результат < /p>
Я попытался установить радиус и границу внутреннего границы Div и добавить верхнюю панель, чтобы дополнить весь Div, но верхние углы внутреннего Div. < /P>
Вот изображение для контекста. Красные стрелки показывают пространства, которые должны быть белыми, но не являются.





Basic HTML File








body {
background-color: #222;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
background-color: transparent;
width: 300px;
height: 400px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}

.top-bar {
height: 40px;
background-color: white;
border-top-left-radius: 8px;
border-top-right-radius: 8px;

}

.inner-box {
flex: 1;
background-color: transparent;
border-radius: 8px;
border: 2px solid white;
}






Подробнее здесь: https://stackoverflow.com/questions/796 ... ded-border