Rounded corner CSS3 without images

Rounded corner CSS3 without images

This technique will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. This technique will not work in Internet Explorer.

<style>
body {
font-family: tahoma;
}
div {
width:400px;
height:25px;
background-color:#DCECCC;
border: 2px solid #89B45A;
padding: 5px;
}
#div1 {
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
}
#div2 {
 -moz-border-radius-topleft: 10px;
 -webkit-border-top-left-radius: 10px;
}
#div3 {
 -moz-border-radius-bottomright: 10px;
 -webkit-border-bottom-right-radius: 10px;
}
</style>



DIV with all corners rounded




DIV with top left corner rounded




DIV with bottom right corner rounded

Demo

http://creativedesign-mind.com/r-ednalan/demo/round_corner_css3.html