CSS rounded corners and gradient border

Question

I am in the process of dicing and slicing a psd layout from a designer. The design is based on the 960 grid system and consists of multiple boxes (a 960px box for the top menu, 2 460px boxes for the 2 content areas, a 220pixel and a 720 pixel for another content setup option etc). All these boxes are based on a solid background color (body) but they all have rounded corners and a aprox border of 10pixel all the way around which are gradient.

I am contemplating on what would be the best route to take here, html wise, while keeping in mind that it should ofcourse validate, nice semantics etc.

Any ideas/input?

Answer 1

I am contemplating on what would be the best route to take here, html wise, while keeping in mind that it should ofcourse validate, nice semantics etc.

The best route to take here would be using pure CSS3 to add the rounded corners and gradients.

Benefits:

• No additional, semantically meaningless, crappy markup required
• No images required
• Easy to implement and maintain
• Ability to degrade gracefully for older browsers that don’t support CSS3

Downsides:

• Doesn’t work in every browser yet

It’s really up to you.

If you want your site to look exactly the same in every browser, CSS3 is not an option — you’ll have to rely on hard-to-maintain images and bloated markup.

However, if you don’t mind giving users of older browsers a slightly different but still nice design, CSS3 definitely is the way to go.

---

‘CSS3’ gradients:

• http://webkit.org/blog/175/introducing-css-gradients/
• https://developer.mozilla.org/en/CSS/-moz-linear-gradient
• https://developer.mozilla.org/en/CSS/-moz-radial-gradient

CSS3 rounded corners:

• http://www.css3.info/preview/rounded-border/

Answer 2

I recommend trying javascript library DD_roundies (http://www.dillerdesign.com/experiment/DD_roundies/). Most browsers already support rounded corners as specified in CSS3, and DD_roundies adds the support also for browsers that don't (like IE).

Answer 3

This ain't going to work flawlessly in all webbrowsers from IE6 and up with only CSS. You'll need to grab JavaScript to get it to work in all browsers. There are jQuery plugins which can round corners on the fly, working on all webbrowsers, without any additional images or CSS. I've had good experiences with this jQuery Corner plugin.