CSS - I would like to implement round (inverse) corner for texts

Question

I often see the design with the rounded corners. But I haven't seen a live version yet. I would like to implement this myself but except before/after with inverse-border-radius I have no idea for the implementation.

Especially for headings I would be interested in this, where this adjusts automatically and 2 line headings are no problem. As seen with the button, just like to have a text paragraph.

Does anyone have an approach for this. Would be happy about help

Answer 1

there is no such thing as "negative border radius". If you know what background you will be using, you can mask it with some before/after elements:

body{
background: #aaa;
padding: 60px;
}
.big{
background: #fff;
padding: 100px;
border-radius: 10px;
position: relative;
}
.small{
position:absolute;
top: 0;
left: 0;
padding: 20px;
border-radius: 10px;
background: #888;
outline: 10px solid #aaa;
}
.small:before{
content: "";
position:absolute;
top: 0;
right: -20px;
width: 20px;
height: 10px;
background: radial-gradient(circle at 100% 100%, transparent 10px, #aaa 10px);
}
.small:after{
content: "";
position:absolute;
left: 0;
bottom: -20px;
width: 10px;
height: 20px;
background: radial-gradient(circle at 100% 100%, transparent 10px, #aaa 10px);
}

<div class="big">

<div class="small">Cutted out</div>
Main content with image
</div>