BoxLib examples

This is an example box.

Code for this box
   <div class="box color1">
    <div class="content">
     <h1>BoxLib examples</h1>
     <div class="line"></div>
     This is an example box.<br />


This is another example box using a "color2" class.


To provide a clean and gracefully-degrading "rounded corners" box/content container design via Javascript/CSS/DOM manipulation under 5.x+ browsers


  • OO-style approach - lightweight reusable component-based design
  • Supported in 5.x+ browsers (minus IE:mac, possibly NS6.0)
  • Multiple color schemes supported via CSS
  • Relatively easy structured HTML implementation
  • Javascript automagically handles creation of box elements
  • Degrades gracefully in older (crappier) and non-supported/capable browsers

Unintended features (bugs) + drawbacks

  • Does not work under IE:mac for some reason (script avoids applying styles for the time being)
  • Separate images required for each color type
  • Corner images need to match body background color
  • IE:win32 workaround for resizing (CSS rounding error?) - likely slows down redraw
  • Occasional content reflow / sizing bug (corner images do not appear in correct positions)