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

Get Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS, Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.