Modern Rounded Corners
As any web developer has experience with, designers and managers alike love rounded corners. We have grown to both anticipate and dread implementing them in various size and colors. What many web developers don’t yet realize is that the latest releases of web browsers support the new CSS 3.0 property: border-radius. Using this property, you can instantly add rounded borders to any box object. However, it comes at a price: neither IE (6/7/8) nor Opera 9.6 support the border-radius property. This means you will need to still create images for the corners for use with these browsers or use an htc file (which I don’t recommend for performance and complexity reasons). Using the following technique, you can make rounded corners which will both degrade gracefully in IE and also avoid unnecessary images in browsers that do support the new property.
First, make a corner sprite image and call it corners-sprite.png. Example:
Next, create the html for the sprite:
<div id="rounded">
<p>This is a test</p>
<span class="corner topleft"></span>
<span class="corner topright"></span>
<span class="corner bottomright"></span>
<span class="corner bottomleft"></span>
</div>
Finally, add the following styles:
div#rounded { padding: 8px; position: relative; width: 300px; background: #ccc; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px }
div#rounded span.corner { display: none; *display: block; overflow: hidden; height: 6px;width: 6px; position: absolute;
background: #fff url(/vir/wp-content/uploads/2008/11/corners-sprite.png) left top no-repeat }
body:empty div#rounded span.corner { display: block } /* FF2 */
div#rounded span.topleft { top: 0; left: 0; background-position: 0 0px }
div#rounded span.topright { top: 0; right: 0; background-position: 0 -8px }
div#rounded span.bottomright { bottom: 0; _bottom: -1px; right: 0; background-position: 0 -16px }
div#rounded span.bottomleft { bottom: 0; _bottom: -1px; left: 0; background-position: 0 -24px }
Your box should appear as:
Note: This technique is not supported in Opera 9.6; users will see square corners. I’ve been very annoyed with Opera’s recent development as they seem to have removed any CSS hacks while not supporting new features. Since Opera continues to trend downward on most browser statistics I’ve seen, I’m tempted to remove support for it completely. Opera either needs to implement a CSS hack or implement every feature that webkit and gecko have today.