I think box-shadow: inset
is messing up with border-radius
.
While waiting for other solutions, you can always avoid using inset
and apply instead a border
, removing manually the 32px (16px + 16px) from the height and width of your div.
.wrapper {
padding: 30px;
}
.circle {
border-radius: 50%;
background: #32a500;
box-shadow: 0px 0px 0px 16px #f1f1f1;
border: 16px solid #f9f9f9;
width: 88px;
height: 88px;
}
<div class="wrapper">
<div class="circle"></div>
</div>