One of the nice options in CSS3 is border-radius. It will allow you to create rounded corners for elements such as divs. This feature is supported in Mozilla/Firefox and Safari 3. IE users will still see the the border, it just won’t be rounded.
CSS3 Rounded Corners
Demo 1 – All Corners Rounded
The CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style type="text/css"> <!-- #roundeddemo1 { background-color: #B00; /*Mozilla Based Browsers*/ -moz-border-radius: 5px; /*Webkit Based Browsers*/ -webkit-border-radius: 5px; border: 1px solid #B00; padding: 20px; color: #FFF; } --> </style> |
The HTML
|
1 2 3 |
<div id="roundeddemo1"> Demo 1 - All Corners Rounded </div> |
CSS3 Partial Rounded Corners.
You can even take it a step further and specify specific corners to be rounded.
Demo 2 – Various Corners Rounded
The CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style type="text/css"> <!-- #roundeddemo2 { background-color: #B00; /*Mozilla Based Browsers*/ -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 0px; /*Webkit Based Browsers*/ -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 0px; border: 1px solid #B00; padding: 20px; color: #FFF; --> </style> |
The HTML
|
1 2 3 |
<div id="roundeddemo2"> Demo 2 - Various Corners Rounded </div> |