Corners - Nested divs revisited

Classic rounded corners - fluid box, nested divs

<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.

Clipped corners - fluid box, single div (using javascript)

Yes, that's right with javascript. Not pure css. You can do it in pure css if you want, but this way allows you to mark up with less non-semantic cruft. Of course, it's actually the same nested div dance in the end.

<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.

  1. /*
  2. - classes object stores all the class names you want to apply corners to
  3. - assign an array of extensions to add to the base class name
  4. - these will be inserted inside the base element wrapping from the inside to the outside
  5. - ie. the outermost div will the last one created from the array
  6. */
  7. var classes = new Object();
  8. classes.clipped = ['br', 'bl', 'tr', 'tl', 'r', 'l', 'b', 't'];
  9.  
  10. /* without firstLoad, returning to the page would result in repeated and unecessary multiple cornering */
  11. var firstLoad = false;
  12. function setCorners()
  13.   {
  14.   if (firstLoad) { return; }
  15.   firstLoad = true;
  16.   for (i=0;i<document.getElementsByTagName("div").length; i++)
  17.     {
  18.     var className = document.getElementsByTagName("div").item(i).className;
  19.     if (classes[className])
  20.       {
  21.       var inner = document.getElementsByTagName("div").item(i).innerHTML;
  22.       var classArray = classes[className];
  23.       for (var j in classArray)
  24.         {
  25.         inner = divWrap(inner, className + '-' + classArray[j]);
  26.         }
  27.       document.getElementsByTagName("div").item(i).innerHTML = inner;
  28.       }
  29.     }
  30.   }
  31.  
  32. function divWrap(value, className)
  33.   {
  34.   return '<div class="' + className + '">' + value + '</div>';
  35.   }
  36.  
  37. window.onload = setCorners;

Another clipped corner div.

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.

Stay away from the corners

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.

Cezanne's Mont Sainte Victoire - or one of them at any rate

Lines lines lines

That's right, why restrict yourself to framing effects? The same javascript, along with the relevant css, can create far more complicated border effects than those possible with pure css.

Back to the CSS index