<!DOCTYPE HTML><HTMLLang= "en"><Head><MetaCharSet= "UTF-8"><title>Rounded corners of the CSS3 Border-radius</title><style>Body{margin:0;padding:100px;}. Example{width:150px;Height:80px;Border:20px Solid #ccc;margin:5px;float: Left;}. example1{-webkit-border-radius:10px;-moz-border-radius:10px;Border-radius:10px;}. Example2{-webkit-border-radius:10px 80px;-moz-border-radius:10px 80px;Border-radius:10px 80px;}. Example3{-webkit-border-radius:0px 20px 50px 100px;-moz-border-radius:0px 20px 50px 100px;Border-radius:0px 20px 50px 100px;}. Example4{-webkit-border-radius:130px 0;-moz-border-radius:130px 0;Border-radius:130px 0;}. Example5{ /*"/" refers to the horizontal radius of the fillet, while the "/" is the vertical radius of the rounded corner .*/-webkit-border-radius:50px 15px 20px 30px/20px 80px 10px 15px;-moz-border-radius:50px 15px 20px 30px/20px 80px 10px 15px;Border-radius:50px 15px 20px 30px/20px 80px 10px 15px;}</style></Head><Body> <Divclass= "Example example1"></Div> <Divclass= "Example Example2"></Div> <Divclass= "Example Example3"></Div> <Divclass= "Example Example4"></Div> <Divclass= "Example Example5"></Div></Body></HTML>
As shown in the following:
Learn more : Http://www.w3cplus.com/css3/border-radius