Rounded corners round-up

I wanted some rounded corners for a web site I’ve been fiddling with. After some digging around the numerous rounded-corners tutorials out there on the web, I concluded I wanted:

  • No extraneous markup — just a div with a class that indlcated “rounded corners”
  • No JavaScript — all of the solutions I saw that used JavaScript to muck about with things to add markup to make the various cross-browser rounded-corners-with-CSS tricks work lagged a bit. This meant the page loaded, rendered, and then all the corners got rounded. It was weird.
  • The page had to look fine in all browsers but I did not care if it had rounded boxes in all browsers. None of the cross browser rounded box solutions I found met the other two requirements.

I settled on using the technique described in “Rounded corners in CSS with the addition of just the rounded corner image from Rounded corners using PHP and the GD library.

I added my own script to generate the rounded corner images I needed from that rounded_corner.png, which I converted to a 1-bit GIF to make writing my script easier. The CSS technique is neat in that it, unlike the -moz-etc corner hack, will work in browsers supporting the :before and :after CSS pseudo elements. At this time, this appears to be just Mozilla and possibly Opera and maybe some versions of Safari. I’ve only tested the it for Firefox 1.5 and IE 6. The corners don’t round in IE 6, but it also doesn’t break.

I did end up having to use a conditional stylesheet for IE to tweak the padding since it didn’t see the :before/:after elements. Including it looked like this:

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="/ie.css"  />
<![endif]-->

and /ie.css contains:

.rounded {
  padding: 10px;
}

The stylesheet block I ended up using to make my rounded corners looks like this:

.rounded {
  background-color: #CCE0DE;
  padding: 0;
  margin: 0 auto;
  min-height: 95%;  
}
.rounded:before {
  background: transparent url(/images/corners/81b1ad/tr.png) scroll no-repeat top right;
  margin-bottom: -20px;
  height: 10px;
  display: block;
  border: none;
  content: url(/images/corners/81b1ad/tl.png);
  padding: 0;
  line-height: 0.1;
  font-size: 1px;
}
.rounded:after {
  display: block;
  line-height: 0.1;
  font-size: 1px;
  content:  url(/images/corners/81b1ad/bl.png);
  margin: 0 0 -1px 0;
  height: 10px;
  background: white;
  background: transparent url(/images/corners/81b1ad/br.png) scroll no-repeat bottom right ;
  padding: 0;
}

The Python script (which requires the Python Image Library) to generate corner images:

#!/usr/bin/python
import Image
import ImageDraw
import ImageChops
def hextotuple(h):
    vals = h[:2], h[2:4], h[4:6]
    toval = lambda x: eval('0x%s' % x)
    return tuple([toval(r) for r in vals])
boxcolor = hextotuple('CCE0DE')
boxcolor = hextotuple('81B1AD')
corners = (("tl", None),
           ("br", Image.ROTATE_180),
           ("bl", Image.FLIP_TOP_BOTTOM),
           ("tr", Image.ROTATE_270))
corner = Image.open("corner2.gif")
corner = corner.resize((10, 10), Image.ANTIALIAS)
corner = ImageChops.invert(corner)
for name, rotation in corners:
    if rotation:
        mask = corner.transpose(rotation)
    else:
        mask = corner
    box = Image.new("RGBA", (10, 10), boxcolor)
    box.putalpha(mask)
    box.save(name + ".png")