Note from the present: you should use CSS3 instead of this
Round corners. Something that should be easy, right? Not so much. It seems they were left out of
the CSS (less than 3) specification. No matter, there are a couple of ways to hack them out and
make them look good. Basically there are two techniques: layering a few empty tags, and using
what this post will focus on.
layered on top of each other. We simply create lines with decreasing side margins, stick them on
top of each other and we have a well-emulated round corner. First I’ll show, then explain.
Do you want round fill??
You notice that there are four b#f definitions. Each one represents a single 1px tall line.
Element b1f is shorter than all the other lines, b2f is a little longer, b3f is longer still,
and b4f is almost the size of the main content element. This is easy to see if we change the
color of each line.
And the result
Each bold tag class is a separate color. The box doesn't look round here, eh?
Now that we have the basics down, this technique is easy to extend. Maybe you want a block with
a border. Thats pretty easy too. We just add 1 pixel side borders to the b2f, b3f, b4f, and
A border perhaps?
Code for the border
Can we go further? I think so. It could be that you want a box with a special color for the
header. Well, it turns out thats not very difficult, either.
Here is your Header!
Look ma, no images!
There are some drawbacks to this technique, however. If you want a box with big radii on the
corners, you will be creating a lot of bold elements for each box. As the radius gets bigger, it
also becomes harder to figure out the margin for each line. Another drawback is the ‘sharpness’
of the corners. Images will produce smoother, anti-aliased corners. If the corner radius is
small, its hardly noticeable, though.
Images are the more versatile alternative. They are a bit more difficult to use and are much
more clunky code-wise unless your boxes are a fixed size. The general approach for variable size
boxes using my favorite technique, the
thrashbox, is about as follows:
make an over-sized image of the complete box, anchor one corner of the image, then overlay the
other three corners in their respective places.
No sense in explaining it in depth as its been hashed out many times. I will, however, point you
to the most awesome site regarding the technique. The site is called
SpiffyBox. Not only does it show you how to do it, it has a little
app that creates images for you based on your criteria! The image creator was the
selling point for me.
There is a border-radius property in CSS3. Check out
this post for more information.