Round corners
As most browsers have adopted the border-radius property (bar Internet Explorer), it is the best way to achieve rounded corners on objects, and much easier than using lots of tiny images as was once the best option.
For example:
.round {
border-radius: 5px;
}
.round-bottom {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
.round-top {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
What about Internet Explorer?
Internet Explorer 9 includes support for rounded borders, but as it has not been out for long and will not run on Windows XP, I would not rely on the border-radius (without prefixes) attribute for IE. Sometimes I wish we could allow IE users to view our sites with all the quirks intact, so that they begin to understand what a bane of our existence IE really is. But whilst IE is still the world's most popular browser, and corporations take decades to update their copies of it, it is important to ensure that websites look correct in versions 7, 8, and 9 (and 6 to a lesser extent) of Internet Explorer.
Please recommend us if you found this article helpful: