Corners - Nested divs revisited

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

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.