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="holder"><span class="haflcircle"></span>    </div>
</div>
<div class="section2">
     <h1>TEST TITLE</h1>

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

CSS

.holder{
    height:50px;
    width:100%;
    position:absolute;
    overflow:hidden;
    bottom:0px;
    left:0;
}

.holder:before, .holder:after {
    content:'';
    display:block;
    width:50%;
    height:50px;
    position:absolute;
    top:0px;
    border-top:50px solid rgba(0, 0, 0, 0.5);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.holder:before {
    left:-50px;
}
.holder:after {
    right:-50px;
}


.haflcircle {
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 0px;
    margin-left: -50px;
    overflow: hidden;
}
.haflcircle:before {
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    border: 50px solid rgba(0,0,0,0.5);
    position: absolute;
    top: -100px;
    left: -50px;
}

.section1 {
    position:relative;
    padding:200px 50px;

}

.section2 {

    background:rgba(0, 0, 0, 0.5);
    color:white;
    text-align:center;
    width:100%;
    position:relative;
    padding:100px 0;

}

body {

    background:#B4D7ED;

}