Mar
15th
15th
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
<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
<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
<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
<div id="roundeddemo2"> Demo 2 - Various Corners Rounded </div>
Recent Comments