<div class="rounded"> <div class="rounded-tl"> <div class="rounded-tr"> <div class="rounded-bl"> <div class="rounded-br"> CONTENT GOES HERE... </div> </div> </div> </div> </div>
Dan Loda reckons that this approach messy. Personally I find inserting additional divs and/or images within the element more messy than nesting the div repeatedly. And there's nothing to stop you commenting those closing divs to make it clearer what's going on.
However, there's a way to do this with only a single enclosing div.
<div class="clipped"> CONTENT GOES HERE... </div>
When the document loads, the setCorners function loops through all the divs in the document - when it encounters any with a class name that's registered in the classes object it then writes the additional divs required for the corners in to that div's innerHTML. These additional divs are assigned class names by taking the base class name and adding a dash and the class name extensions (eg. clipped becomes clipped-tr, clipped-bl etc).
The function is probbaly generic enough for most circumstances but itcould look for any element rather than just divs, or for ids rather than classes, and it could use explicit full names for the wrapping divs rather than creating them with extensions.
Just to show that with the generic script in use, any instance of a div with a class name that has been registered will get the "cornering" treatment.
And don't feel that you should have to only use corners. You can have place elements at the mid-points. Or third-way-points. Or whatever.
Or use a posh frame.
Back to the CSS index