Wednesday, December 29, 2010
HTML5: CSS3 Borders
This is one of the CSS3 features that is supported decently well across all browsers, note
all browsers implies Safari 5+, Chrome 8+, Firefox 4+, IE 9+, don't bother trying to get
HTML5 features working in IE6 era browsers. The property is easy to use and should help
get rid of images for rounded corners. Earlier versions of Firefox
support border radius through -moz specific property.
CSS3 Info Website has done
a good job of explaining border-radius property in detail. One of the better examples of
rounded corners using border-radius is showcased at
Web Designer Wall.
Here's a quick overview of border-radius property:
border-radius: 9px;
border-radius: 6px 12px 6px 12px;
border-top-left-radius: 6px;
border-top-right-radius: 12px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 12px;
-moz-border-radius: 9px;
-moz-border-radius: 9px;
-moz-border-radius: 6px 12px 6px 12px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 12px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 12px;
In bhira.net website I've used border-radius property for rounded corners for header and
page div. Dropdown menu items are rendered as unordered list with border-radius.
You'll need to set border-radius for first-child and last-child elements within the
list to ensure hover color change honors rounded corners.
-- Baldeep Hira