4つの斜めのエッジで形状を作るには

Question

4つの負の曲がったコーナーでシェイプを作ろうとしています。放射状のグラデーションを試しました。しかし、コーナーの1つだけが適用されているので、なぜ私は理解できません。 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

各放射状グラデーションの最後の色ストップは、正方形の残りの部分を覆っている、互いの上に重ね、それらを考えます。私は私の修正があなたが探している形を得るための最良の方法であるかどうかはわかりませんが、これは少なくとも形を作ると思います！私は他の3つのコーナーのいずれかをカバーする前に、ラジアルグラジエントを終了するようにストップを短くしました。

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>