border-radius:
Good news for designers, now onwords no need to use rounded corner images to get rounded effect to the
boxes. The css3 border-radious property allows to easly utilise the rounded corners.
Basic Example
The following browsers support the rounded corners for Firefox, Safari/Chrome, Opera and IE9.
The css property for this example is, quite simple:
#bor1 {
border-radius: 15px;
}
To support Firefox browser, need to use the -moz- prefix
#bor1 {
-moz-border-radius: 15px;
border-radius: 15px;
}
<div
style=" -moz-border-radius: 15px;
border-radius: 15px;
height: 150px;
width:250px;
border-top-left-radius: 50px 100px;
border:5px solid #ddd;
background-color:#ddd" >
</div>
How border-radius Works
By using the four individual borders-radious properties
1. border-bottom-left-radius
2. border-bottom-right-radius
3. border-top-left-radius
4. border-top-right-radius
Rounded corners can be created independently.
<div
style="height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
background-color:#ddd">
</div>
<div style="
height: 100px;
width:250px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
background-color:#ddd >
</div>
<div
style="height: 130px;
width:250px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
background-color:#ddd" >
</div>
<div style=" height: 100px;
width:250px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
background-color:#ddd" >
</div>
<div style="height: 130px;
width:250px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
background-color:#ddd" >
</div>
<div style=" height: 100px;
width:250px;
-moz-border-radius: 350px;
border-radius: 35px;
background-color:#ddd" >
</div>
