Inverted border radius with complex box shadow - html

Question

I'm trying to recreate this print card that has a inverse border radius and a couple borders. I got the borders working on a rectangle using box shadow, and I am fudging the inverted corners with 100% border radius divs. I applied the shadow to the rounded corners though and it looks super off.
Is there any way to use circle svgs to clip the corners then use filter: drop-shadow? not sure that's possible. any better ideas?
html:
#greetings
.top.left
.top.right
.bottom.left
.bottom.right
css:
#greetings{
box-shadow: -6px 6px 0 #8E9090, 6px -6px 0 #8E9090, -6px -6px 0 #8E9090, 6px 6px 0 #8E9090, -9px 9px 0 #f88125, 9px -9px 0 #f88125,9px 9px 0 #f88125, -9px -9px 0 #f88125, -12px 12px 0 #8E9090, 12px -12px 0 #8E9090, 12px 12px 0 #8E9090, -12px -12px 0 #8E9090;;
div {
position: absolute;
width: 40px;
height: 40px;
border-radius: 100%;
background-color: #f88125;
}
.top { top: -20px; }
.bottom { bottom: -20px; }
.left { left: -20px; }
.right { right: -20px; }
.top.right {
box-shadow: -6px 6px 0 #8E9090, -9px 9px 0 #f88125, -12px 12px 0 #8E9090;
}
Target:
Html corners:
Wonky shadow:

Answer 1

I couldn't pull this off with your box-shadow approach.
I achieved something similar with borders and relative positioning. Didn't have time to polish the code, and if you look closely it is not symmetrical. It is not finished, but I thought I'd collaborate with an alternative.
I'm sure you can play around with the circles div widths to make the card look more similar to the original.
html
<div class="label">
<div class="inner-border-two"></div>
<div class="inner-border"></div>
<div class="corner-0 corner"></div>
<div class="corner-0 inner corner"></div>
<div class="border border-top"></div>
<div class="corner-1 corner"></div>
<div class="corner-1 inner corner"></div>
<div class="border border-right"></div>
<div class="corner-2 corner"></div>
<div class="corner-2 inner corner"></div>
<div class="border border-bottom"></div>
<div class="corner-3 corner"></div>
<div class="corner-3 inner corner"></div>
<div class="border border-left"></div>
</div>
css
.label{
position: relative;
display: inline-block;
width: 660px;
height: 458px;
border: 30px solid #F88125;
padding: 0;
}
.label .inner-border-two{
height: 104%;
width: 103%;
border: 2px solid #8E9090;
position: absolute;
top: -8px;
left: -8px;
}
.label .inner-border{
height: 100%;
width: 100%;
border: 6px solid #8E9090;
position: absolute;
}
.label .corner {
width: 38px;
height: 38px;
position: absolute;
background-color: #F88125; //Orange
}
.label .corner-0{
left: 0;
top: 0;
border-bottom-right-radius: 100%;
border-bottom: 6px solid #8E9090;
border-right: 6px solid #8E9090;
}
.label .corner-0.inner{
left: -8px;
top: -8px;
border-bottom: 3px solid #8E9090;
border-right: 3px solid #8E9090;
}
.label .corner-1{
right: 0;
top: 0;
border-bottom-left-radius: 100%;
border-bottom: 6px solid #8E9090;
border-left: 6px solid #8E9090;
}
.label .corner-1.inner{
right: -10px;
top: -8px;
border-bottom: 3px solid #8E9090;
border-left: 3px solid #8E9090;
}
.label .corner-2{
right: 0;
bottom: 0;
border-top-left-radius: 100%;
border-top: 6px solid #8E9090;
border-left: 6px solid #8E9090;
}
.label .corner-2.inner{
right: -10px;
bottom: -8px;
border-top: 3px solid #8E9090;
border-left: 3px solid #8E9090;
}
.label .corner-3{
left: 0;
bottom: 0;
border-top-right-radius: 100%;
border-top: 6px solid #8E9090;
border-right: 6px solid #8E9090;
}
.label .corner-3.inner{
left: -8px;
bottom: -8px;
border-top: 3px solid #8E9090;
border-right: 3px solid #8E9090;
}