Custom/irregular border radius using css - css

Question

Is there a way to create this kind of border radius? its like the opposite of the normal border-radius, I cant figure out how to make that one.
I search on related questions here, but cant find one.
Hope you help me.
thanks

Answer 1

I would do it like this:
body {
background:pink;
}
.box {
margin:40px;
height:80px;
border:3px solid #000;
border-bottom:none;
border-radius:20px 20px 0 0;
position:relative;
}
.box:before {
content:"";
position:absolute;
bottom:-20px;
left:-20px;
right:-20px;
border-bottom:3px solid #000;
}
.box:after {
content:"";
position:absolute;
left:-20px;
right:-20px;
top:100%;
height:20px;
background:
radial-gradient(circle at top right, transparent 60%,#000 61.5%,#000 72%,transparent 74%) top right/20px 100% no-repeat,
radial-gradient(circle at top left, transparent 60%,#000 61.5%,#000 72%,transparent 74%) top left/20px 100% no-repeat;
}
<div class="box">
</div>
You can add more control with CSS variable:
body {
background:pink;
}
.box {
margin:var(--r,20px);
height:80px;
border:3px solid #000;
border-bottom:none;
border-radius:var(--r,20px) var(--r,20px) 0 0;
position:relative;
}
.box:before {
content:"";
position:absolute;
bottom:calc(-1 * var(--r,20px));
left:calc(-1 * var(--r,20px));
right:calc(-1 * var(--r,20px));
border-bottom:3px solid #000;
}
.box:after {
content:"";
position:absolute;
left:calc(-1 * var(--r,20px));
right:calc(-1 * var(--r,20px));
top:100%;
height:var(--r,20px);
background:
radial-gradient(circle at top right, transparent calc(71% - 3px),#000 calc(71% - 2px),#000 71%,transparent 73%) top right,
radial-gradient(circle at top left, transparent calc(71% - 3px),#000 calc(71% - 2px),#000 71%,transparent 73%) top left;
background-size:var(--r,20px) 100%;
background-repeat:no-repeat;
}
<div class="box">
</div>
<div class="box" style="--r:50px">
</div>
<div class="box" style="--r:80px">
</div>