Chapter 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 prior to 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 a method for creating rounded-corner boxes using background images in 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 discuss an alternate method for creating a rounded-corner box that is flexible in every direction but that requires extra markup.