by Ryan Walker •

rounded corners in web design

The RecruitMilitary home page redesign liberally makes use of rounded corners, as all good web 2.0 websites do.

I know we do some rounded corners in the project so far using jQuery, and in some places just using -moz-border-radius so at least firefox has rounded corners, but for the new home page, I decided that I want to make it work with all modern web browsers, including IE.

Quick aside: Microsoft’s lack of any border-radius implementation in IE8 is ridiculous. They basically give us links to some old articles and a few web search links. Why not an -ie-border-radius implementation like Firefox has (-moz-border-radius), Webkit has (-webkit-border-radius) and even Konquerer has (-khtml-border-radius). As the browser with the highest market share, they sure are doing a lot wrong.

Back to solving the cross platform problem.

  • jquery.corners.js doesn’t work – it tries to render corners and fails
  • i tried to use dd_roundies, but the corners it renders are a bit ugly
  • i googled around for another hour, finding lots of articles from 2005 + 2006, not really trusting that the info is relevant for 2009. Many of the solutions were complex.

So then I decided to check + see how 37signals, Apple, and Mailchimp handle their rounded corners, figuring they would have chosen the best route.

No elegant solution, these companies are doing it the way they always have. Big background images, top/bottom caps, repeating background for the body of the element that creates the left/right border.

What I’ve learned is that I generally will want to program my way out of a problem than Photoshop my way out of it, but this is a case where it seems the best way is still to just make the graphics. At least in modern design, the entire elements aren’t graphics, usually most of the text ends up being rendered from HTML.

So, I’m dumping the javascript attempts and waiting for CSS3, it seems. Opening Photoshop… then I remember the PNG transparency bug in older IE’s, but there’s a nice jQuery plugin to fix any divs that are giving you problems.

Filed under Web Design