Beveled corners & negative border-radius with CSS3 gradients

HTML

<div class="section1">
    <p>By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case, don't put the color stops at the exact same position, since the result will be too aliased in most browsers (and kinda still is in Webkit).</p>
    <div class="haflcircle"></div>
</div>
<div class="section2">
     <h1>TEST TITLE</h1>

    <div>Test sub</div>
</div>

CSS

.haflcircle {
    background:
        -moz-radial-gradient(100% 0, circle, rgba(0,0,0,0) 25px, #000 25px),
        -moz-radial-gradient(0 0, circle, rgba(0,0,0,0) 25px, #000 25px);
    background:
         -o-radial-gradient(100% 0, circle, rgba(0,0,0,0) 25px, #000 25px),
         -o-radial-gradient(0 0, circle, rgba(0,0,0,0) 25px, #000 25px);
    background:
         -webkit-radial-gradient(100% 0, circle, rgba(0,0,0,0) 25px, #000 25px),
         -webkit-radial-gradient(0 0, circle, rgba(0,0,0,0) 25px, #000 25px);
}

.haflcircle {
    background-position: bottom left, bottom right, top right, top left;
    -moz-background-size: 50% 50%;
    -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    height:50px;
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
}
.section1 {
     position:relative;
    padding:200px 50px;
}
.section2{
    background:#000;
    color:white;
    text-align:center;
    width:100%;
    position:relative;
    padding:100px 0;
}


body{
    background:#B4D7ED;
}