5. Indestructible Boxes

Plan for the unknown when constructing styled boxes

Although the very nature of CSS tends to be rather boxy, that doesn’t mean designs have to be constrained to square dimensions. The CSS box model defines rectangular boxes that are generated for elements within a document’s structure (www.w3.org/TR/REC-CSS2/box.html)—in other words, a rectangular box is the standard method for organizing elements when using CSS. The result can lead to square, boxy designs being the norm.

This is nothing new, of course. Even before the widespread use of CSS layouts, table-based designs were constrained to a box design as well, with each table cell rectangular in shape by default.

This chapter describes several methods for creating rounded-corner boxes using background images and/or CSS. We rebuild an existing design from the web, making it flexible and thus preparing for the worst-case scenario in terms of what could be placed inside the box. Later, we’ll discuss alternate methods for creating rounded-corner boxes that are flexible in every direction. Finally, we look at some simple examples for modifying the boring box. CSS3 methods for decorating boxes have become the ideal in terms of flexibility, maintainability, and imageless production, but we’ll discuss some image-based options for those situations where a boss or client is adamant about the decoration working in old browsers.