CSS round corners without images

I’ve had a great deal of my time at work allocated to ‘special projects’ recently so with the prospect of an upcoming GUI upgrade to our online digital asset system I decided to weigh in to the brave (not so new) world of CSS.

As an oversimplified layman’s guide: CSS is used to define how a web page should look - how/where text and images should appear and a bunch of other cool things that I am only just starting to discover.

One of the first tasks a CSS newbie like myself attempts is to make a ‘button’. Defining the colour of the background of a link then giving it a border and adding some slight colour changes when someone hovers and clicks and mere words are turned into something quite functional. Thing is… there is only so far you can take rectangular shapes.

Enter the ‘rounded corners’ debate.

When a square corner just won’t do, what is the best way to tame those 90 degrees? Of course you could just draw a picture of the whole button you want and make it a link. This is a bit of a sledgehammer solution and every person who views the web page will have to sit on their hands while their browser downloads all these little images. I pause for a moment at this point to wonder: in these exciting days of broadband uptake, how relevant is the need to minimise the download size of a web page? I’ll relent to the fact that people far more knowledgeable than I still assert the relevance of this issue so let’s continue.

There are many solutions ranging in various combinations of compatibility, complexity and convenience.

I may be doing some very talented people a great disservice here (in truth I haven’t read ALL the solutions listed on the previous link … but a sample of the more prominent ones at least) … but apart from a solution that is only supported on a very small (but arguably the best) portion of browsers they all revolve around positioning images of round corners over the top of the corners of your rectangular button. Sure, this reduces the bandwidth drain of a page and sorry to call out the emperors new clothes here but how about a solution rather than just reducing the size of the problem? An old boss of mine used to say “Don’t tell me problems, offer me solutions” so here’s my two cents:

At it’s most basic, a round corner is a couple of pixels coloured the same as the background. Instead of saving an image of an arrangement of these few dots for each corner why not just include instructions for how to arrange these little dots in the HTML and CSS? This way you can change the colour of the element and of the background as you please and you don’t have to have little .gif’s saved for each colour combination. You could even change the size/shape of the corners as you go…

Here’s my first attempt…

Just code round corners







View source for the html and the CSS is like this…


#banner1 {background-color:#c00; color:#fff; position:absolute; top:30px; left:30px; font-family: verdana, sans serif; text-decoration:none; padding:3px 8px 3px 8px;}
#banner1:hover {background-color:#5c5; color:#000;}

.TL, .TR, .BL, .BR {Position:absolute; font-size:0;}

.TL {top:0; left:0;}
.TR {top:0; right:0;}
.BL {Bottom:0; left:0;}
.BR {Bottom:0; right:0;}

.a { width:4px;}
.b { width:2px;}
.c { width:1px;}
.d {position: relative; left:2px; width:2px;}
.e {position: relative; left:3px; width:1px;}

/*-- background color --*/
.a, .b, .c, .d, .e {height:1px; background-color: #fff;}

This is the point in writing this that I am starting to get quite nervous. I wonder what sort of reaction this will draw?

I have tried this on firefox mac and pc, safari, ie mac and pc - 5 and up and it seems to be fine.

Well… actually IE has slight issues. The corners are more elliptical than circular and I believe this is related to the font-size (hence the attempted fix ‘font-size:0’) Perhaps someone can shed some light on this?