Without the need for corner images or the use of multiple div tags Rounded Corners are very easy it is just few lines of CSS3 code and it will work in all major browsers.In CSS3, creating rounded corners is easy the border-radius property is used to create the rounded corners.Rounder corners can be created independently using the four individual border-*-radius properties and we can control the LEFT-RIGHT-BOTTOM and TOP Corners also.
Step 1
Write the few lines on CSS code inside the HEAD tag.#corner{
border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #06C;
height:30px;
width:200px;
}
#corner-top-right{
border-top-right-radius:10px;
-moz-border-radius-topright:10px;
-o-border-radius-topright:5px;
-webkit-border-radius-topright:5px;
border:1px solid#06C;
height:30px;
width:200px;
}
This solution works fine in IE too, check it:
ReplyDeleteIn your CSS:
#rounded_corners{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
behavior:url(border-radius.htc)
}
And add the file "border-radius.htc" from here: https://code.google.com/p/curved-corner/downloads/detail?name=border-radius.htc
Regards!!