Inner border-radius
HTML
<div>
<span id="bottom-left"></span>
</div>
CSS
body {
margin: 20px;
background:white;
}
div {
position:relative;
margin:0 auto;
background:green;
min-height:80px;
padding:40px;
}
div:before {
content:'';
display:block;
width:0;
height:0;
position:absolute;
top:-40px;
left:-40px;
border-left: 40px solid transparent;
border-bottom: 40px solid transparent;
border-top: 40px solid transparent;
border-right: 40px solid white;
border-radius:40px;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
div:after {
content:'';
display:block;
width:0;
height:0;
position:absolute;
top:-40px;
right:-40px;
border-left: 40px solid red;
border-bottom: 40px solid transparent;
border-top: 40px solid transparent;
border-right: 40px solid transparent;
border-radius:40px;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#bottom-right {
content:'';
display:block;
width:0;
height:0;
position:absolute;
bottom:-40px;
right:-40px;
border-left: 40px solid white;
border-bottom: 40px solid transparent;
border-top: 40px solid transparent;
border-right: 40px solid transparent;
border-radius:40px;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#bottom-left {
content:'';
display:block;
width:0;
height:0;
position:absolute;
bottom:-40px;
left:-40px;
border-left: 40px solid transparent;
border-bottom: 40px solid transparent;
border-top: 40px solid transparent;
border-right: 40px solid white;
border-radius:40px;
-moz-transform: rotate(-45deg);
...