Page Widget How to - Create beveled corners & negative border-radius with CSS3 gradients

Question

We would like to know how to create beveled corners & negative border-radius with CSS3 gradients.

Answer

Revised from http://fiddle.jshell.net/mdxau/3


<!--from w w  w. j a va  2  s . c o m-->
<!--
    Credit to Lea Verou and her tutorial at http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/
    Credit also to Simon Hjberg's CSS Arrow Generator at http://cssarrowplease.com/
-->

<!DOCTYPE html>
<html>
<head>
  <style type='text/css'>
div.curvestart {
    postition:absolute;
    left:0px;
    height: 60px;
    width:300px;
    background: #c00;
}
div.round {
    position:absolute;
    top:8px;
    left:300px;
    width: 100px;
    height:100px;
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 39px, #c00 40px, #c00 100px, rgba(204,0,0,0) 100px);
    background:
         -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 39px, #c00 40px);
    background:
         -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 39px, #c00 40px);
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.round:after, .arrow_box2:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.round:after {
    border-color: rgba(204, 0, 0, 0);
    border-top-color: #c00;
    border-width: 60px;
    left: 67%;
    margin-left: -60px;
}
.round:before {
    border-color: rgba(250, 97, 97, 0);
    border-top-color: #fa6161;
    border-width: 66px;
    left: 67%;
    margin-left: -66px;
}
  </style>
</head>
<body>
    <div class="curvestart"></div>
    <div class="round"></div>
</body>
</html>

The code above is rendered as follows: