How do make a shape with 4 beveled edges - css

Question

I'm trying to make a shape with four negatively curved corners, and I tried the radial gradients. However, only one of the corners is being applied, and I can't figure out why.
https://jsfiddle.net/xiej/1Lqysaho/1/
#shape2 {
width: 120px;
height: 120px;
position: absolute;
top: 400px;
right: 400px;
background-image:
radial-gradient(circle at 0px 0px, #FFF 0px, #FFF 60px, #F00 60px),
radial-gradient(circle at 0px 120px, #FFF 0px, #FFF 60px, #F00 60px),
radial-gradient(circle at 120px 0px, #FFF 0px, #FFF 60px, #F00 60px),
radial-gradient(circle at 120px 120px, #FFF 0px, #FFF 60px, #F00 60px);
}

Answer 1

The last color stop of each radial gradient is covering up the rest of the square, think of them layering over each other. I'm not sure that my fix is the best way to get the shape you're looking for, but I think this will make the shape at least! I shortened the stops to end the radial gradient before it would cover any of the other three corners.
https://jsfiddle.net/1Lqysaho/2/
background: #F00;
background-image:
radial-gradient(circle at 0px 0px, #FFF 60px, #f00 1px, transparent 1px),
radial-gradient(circle at 0px 120px, #FFF 60px,#f00 1px, transparent 1px),
radial-gradient(circle at 120px 0px, #FFF 60px,#f00 1px, transparent 1px),
radial-gradient(circle at 120px 120px, #FFF 60px,#f00 1px, transparent 1px);

Answer 2

div.round {
background:
-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
}
div, div.round {
background-position: bottom left, bottom right, top right, top left; c
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-repeat: no-repeat;
}
div {
width: 130px;
height:100px;
margin:15px auto;
padding:13px 15px;
}
<div class="round"></div>