Demo: Using CSS3 to create a rounded corner box
by Mike Badgley on May 17, 2010
As the CSS3 specification continues to take the web by storm, more and more browsers are
With CSS3, much of the slicing work that used to be the norm back in the ‘old’ CSS2/2.1 days is become much less of a necessity. What used to take multiple (background) images to create a rounded corner, drop shadow or gradient effect can now be easily and quickly done with CSS3.
This was a pain on many levels – front-end developer notwithstanding! For example, to create a layout for the feature box mock-up shown below, you would be look (at the bare minimum) four background images:
- Header gradient
- RSS icon
- Rounded-corner box
- Rounded-corner button
If you wanted a fluid-width box, there would be extra markup required (<div> element for each corner of the box) and this would also mean extra background images to compensate for this (unless you combined the images into a sprite). Or, if you went with a static-width implementation, you would be forced to create additional images if you wanted to use a smaller or larger version of the box.
Talk about a time consuming and potentially frustrating experience, but that’s the way things were and we got used to it.
However, with CSS3 support coming soon to a browser near you, the way design elements, like the one in the example above, are handled can be done in a completely different – dare I say ‘smart’ way! Using the aforementioned example, I created a nearly identical version of it using only CSS and only one background image (RSS icon). This has been styled to be a fixed width, but changing that requires nothing more than a tweak to the width property of the parent wrapping element.
A screenshot of what the resulting box looks like:
As you can see, its not as nice looking as the Photoshop version (from the first screenshot), but pretty close.
A demo of the HTML/CSS that was used to generate the box above can be viewed here.
In terms of full support across all the top browser manufacturers, we are not there yet, but we are getting closer and I expect that in a couple of years this will be the standard (CSS3) that all the current browsers will meet.