Rounded Corner

border-radius.css

<!-- Border Radius -->

<div class="rounded-box">


</div>

<style>

/*    */

.rounded-box {

	width:600px;
	height:400px;
	background-color:#ffffff; 

    border-radius: 30px ; /* shorthand */


	border-top-left-radius: 30px; 
	border-top-right-radius: 10px;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 10px;


	border-top-left-radius: 30px; /* one value */
	border-top-left-radius: 80px 40px; /* two value - horizontal -vertical */

	border-radius: 30px 40px; 

	/* first - top left bottom right corner  */
	/* second - top right bottom left corner  */

	border-radius: 50px / 100px; 
	/* all cornes 50px horizontal - 100 vertical  */

    /* lemon shape */
    width:200px;
	height:200px;
	background-color:#F5F240; 
    border-radius: 10px 150px 30px 150px; 
}



</style>

Rounded Corners.css

/* I’ve included both a condensed version and a longer base 
with each corner radius broken down into a different property.*/

#container {
    -webkit-border-radius: 4px 3px 6px 10px;
    -moz-border-radius: 4px 3px 6px 10px;
    -o-border-radius: 4px 3px 6px 10px;
    border-radius: 4px 3px 6px 10px;
}

/* alternative syntax broken into each line */
#container {
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 10px;
    
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 10px;
}

contexts