Rounded Corners and Other Hooks

By Henry Woodbury

The upcoming CSS3 Specification looks to codify some of today’s favorite interface design tricks, including rounded corners, drop shadows, alpha transparency, and custom fonts. Many of these features can be accessed already using the probable CSS3 style or a browser-targeted version of the same. For example, rounded corners has three test declarations:

-moz-border-radius (for Mozilla-based browsers such as Firefox)
-webkit-border-radius (for Webkit-based browsers such as Safari)
border-radius (the probable CSS style)

Here is a semi-transparent white box with rounded corners and a drop shadow. Two circles are overlayed to show transparency effects.

None of these effects show on the current version of MSIE 7 — so let that be your control. Some may not show on Firefox until the release of Firefox 3.1, but all work on Safari using the Webkit syntax.