Hooks
I’ve recently been thinking about the problem of rounded box corners in CSS. There are several solutions to this floating around. From the use of multiple layers of nested divs to provide the ‘hooks’ from which to hang the corner elements to another solution of nested divs and list bullets to graphically create a rounded line. Other approaches dispense with the problem of boxe resizing and instead use a graphic that has a fixed width and contains the corners for both right and left sides.
Of all the approaches, I think the list bullet idea is the most creative. However, there’s also alot of screaming going on about extraneous markup. “Why have multiple nested divs when we are trying to seperate presentation from content?!” they shout.
While I think this is a valid point, the current state of the CSS spec implemented in current browsers just isn’t up to fufilling the dream of true content/presentation separation. There are many points on which this may be argued, but I think the rounder box corner problem illustrates this nicely. For this problem specifically, the ability to specify a border corner type would be perfect. There are already some proprietary CSS rules available for this (which, if you are using a Mozilla based browser, you will notice on my side menus), but that doesn’t help towards the goal of standards…which we are after.
So let’s start by thinking about all the goals involved in creating rounded box corners.
- Minimal to none extraneous markup
- No proprietary CSS rules
- Ability to resize the box (because of a user increased font size) and have the text remain inside the rounded corner box
While three main goals doesn’t seem like much, it truly is a tall order using CSS1 and the smattering of CSS2 available to most browsers. Is there a solution that fufills these goals? Who knows. I haven’t seen it yet and I haven’t thought of it myself. Rest assured, I will keep thinking about though…