I Love Stripes, and Rounded Boxes

You might have noticed that this blog is now a lot more “stripey” than before. There are light stripes, dark stripes, plus rounded striped boxes for modern browsers (Read: non-IE). It’s just a few changes here and there to keep things fresh.

More importantly, I needed a test bed for some rounded boxes implementations, and decided to try out one using the :before and :after CSS suffixes. While this method is not completely cross-browser compatible (yep, IE again), it seems to be one of those requiring the least XHTML markup - though it’s highly unlikely I’ll ever use it again.

For one, you still need to ensure you have at least one more hook (e.g. another div) within the containing div if you want to apply any sort of overall padding onto your rounded box. Applying padding onto your containing div will mess with the rounded edges. Let’s not forget you’ll still have to use 4 images - one for each corner.

As such, I might as well use ThrashBox or Søren Madsen’s implementation over at A List Apart. Both are completely cross-browser compatible, support gradients, and the former only requires one image.

Of course, I could be missing something. Is there really any reason to use :before and :after for your rounded boxes?