Rounded corner is one of my favourite properties in CSS3. It actually save us a lot of works in creating them using images and javascript hacks. Mind you, IE 6 - 8 will not able to support it, alternative solution will be required such as javascript hacks.
CSS
The most common use of border-radius
.rounded-corners { -moz-border-radius: 20px; /* firefox */ -webkit-border-radius: 20px; /* safari/chrome */ border-radius: 20px; /* ie9, future proofing for whatever browser that support this arrtibute */ }
CSS
All other properties of border radius
.custom-rounded-corners { /* firefox */ -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; /* safari/chrome */ -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; /* ie9, future proofing for whatever browser that support this arrtibute */ border-top-left-radius : 10px; border-top-right-radius : 10px; border-bottom-left-radius : 10px; border-bottom-right-radius : 10px; }
CSS
Of course, short hand for border radius, quicker, cleaner and easier.
.shorthand { -moz-border-radius: 20px 15px 10px 5px; -webkit-border-radius: 20px 15px 10px 5px; border-radius: 20px 15px 10px 5px; }
CSS
Other short hand, it works just like declaring padding: 5px 0px 5px 10px; but they have two set of values, one for the horizontal radii and the latter is for vertical radii. So you can create a different kind of rounded border.
.other-shorthand { border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px; /* horizontal radii and vertical radii */ border-radius: 5px; border-radius: 5px 10px / 10px; }
Comments will be moderated and
rel="nofollow"
will be added to all links. You can wrap your coding with[code][/code]
to make use of built-in syntax highlighter.