Rounded corners and dropshadows in CSS

Question

Hi all,
Hopefully I am not repeating a similar question. I am trying to redesign my site (with not much luck) in CSS. I want some text/navigation boxes that have rounded corners and drop shadows.  Using CSS do I still need to create the images in an image editor, slice the images and place the appropriate sections of the image in divs to get this effect (much like using tables)?
Thanks in advance
Chris

Answer 1

afr43 wrote:
Using CSS do I still need to create the images in an image editor, slice the images and place the appropriate sections of the image in divs to get this effect (much like using tables)?
Thanks in advance
Chris
Like Nancy mentioned, the border-radius properties are not supported in older browsers, particularly IE6, which some of us still worry about. I'm not sure about the support in IE7, but I still design with IE6 in mind. In fact, I have never upgraded my IE browser since version 6, so I keep it on my computer for testing purposes.
In deciding whether to use new css features is deciding whether you are willing to leave IE6 behind. I emailed Simon Collison about this topic a couple of weeks ago. He wrote two very good books about CSS, Beginning CSS and CSS Mastery. The latter book was co-written with Andy Budd.
Here's what Simon said:
"There are so many conflicting views that you really need to think about your target audiences and decide based on that. Will you upset just two or three percent of people, or twenty/thirty percent by not serving for IE6?
"We use stats to discover the portion of users using IE6 and make a unique decision for each project.
"In all honesty, I think it is too early to abandon IE6. We work for clients in the real world, with lots of users locked into using IE6 thanks to over-zealous, outdated IT teams/experts who won't let them upgrade or use Firefox etc."
When I mentioned to Simon that some of the css features he used in his book were not supported in IE6, he responded:
"In a book like CSS Mastery, you have to forget older browsers and look at the future, and cool, exciting techniques. If we wrote that book so everything worked in IE6, it'd be a dull book, and would not have advanced CSS usage."
Most of us are itching to use the latest features of CSS but we need to design for users and consider what their experience will be. So, it comes down to this: It's your decision whether you will use CSS that is not supported by some of the older browsers. If you have a fairly sophisticated market that probably upgrades their browsers to the latest versions, then you might choose to go with the latest features.
My decision is to still style for IE6 (I think it's safe to say that most designers have left IE5 far behind in the dust). These new CSS3 features will look absolutely hideous in IE6.
There is a technique Simon uses in one of his books that he calls "progressive enhancement." The technique will enable new css features, like rounded corners, to only work in modern browsers and in old browsers, like IE6, visitors will see square corners.
I think the best technique that most designers still use is to create rounded corner images in your css. Here's an example of a web site showcased in css zen garden that uses rounded corners with a drop-shadow:
http://www.csszengarden.com/?cssfile=208/208.css
If you right-click on the rounded corners and look at the background images, here's what you see:
For the header: http://www.csszengarden.com/208/top.jpg
Main content: http://www.csszengarden.com/208/right_bottom.gif
Side bar: http://www.csszengarden.com/208/left_bottom.gif
CSS Zen Garder invites designers to download the css file from these sites so you can learn from it.
By the way, the second edition of CSS Mastery: Advanced Web Standards Solutions is due out in a couple of weeks.