Lest We Forget: An Ode to the Border Radius

Border radius seems like such a simple, obvious CSS property. But can we all take a moment and pour one out for that time we had to create tiny images and place them all around a container?

<div class="box-container">
	<div class="box-top-left"></div>
	<div class="box-top-right"></div>
	<div class="box-content">[....]</div>
	<div class="box-bottom-left"></div>
	<div class="box-bottom-right"></div>
</div>

And we think people are div-happy now!

What’s funny about border radius is that CSS was actually a step ahead of PhotoShop. You could always make a rounded corner box, but it didn’t scale. If you resized the box, the edges would transform right along with the rest of it, so you had to redraw it every time. It wasn’t until the CC that you got to input a border-radius pixel value. Firefox 2 and Chrome 4 both had border-radius with prefixes.

But even more interesting then border radius is the idea of 9-slice scaling. I first encountered it called as such working on an implementation of Android TV in 2010, and I was dumbfounded. Why the fuck isn’t everything like this? For those who continue to miss Fireworks, here’s a great example. It was also in Flash, but I don’t recall ever using or noticing it, as I typically only worked in ActionScript and not so much in the visual editor.

9 Slice Scaling in Fireworks

Basically, you define what will stretch when a thing is scaled and what will not. The inside bit will scale, the corners will not. Genious. Illustrator does this too.

Now that transforms, including scaling, are widely available to the web, what about 9 slice scaling? If you watch that Illustrator video, it’s a demo of using scaling on a banner image with fancy edges. You want to be able to stretch the content area, but not the ribbon-y bits.

When I make things like this in CSS, I use pseudo elements. The ribbons are before/afters, and the content area is the actual container for the content. This works if the parts that you want not to scale are only 2 (side to side or up and down), but not if you want all 4 edges not to scale.

I suppose this is where border images come into play. Remember those? That one time you tried to use them and became so horribly frustrated that you ended up just using some crazy mix of pseudo elements and inset box shadows? What, no I never did that.

It seems as though we’ve mostly managed to work around the need for it, though. Buttons aren’t images, they’re CSS. With border-radius, and box shadows, and gradients we no longer have need for it. Pseudo-element hackery has given us a whole wide world of extra div’s that we don’t have to apologize for.

But…what about SVG. Well, it doesn’t really work. There are some hacks you can do, but then we’re kind of back to square one.

Sweet, we’ve managed to find something to complain about! My work here is done.