Boxes and borders can be added to any tag including a block of text:
| Properties | Example(s) |
| margin (-top, -right, -bottom, -left) | p{margin:10px 5px 20px 15px;} (pt, em, %) |
| padding (-top, -right, -bottom, -left) | div{padding:4em;} (pt, px, %) |
| border | p{border:3px solid #cfd;} (pt, %) |
| border-width | p{border-width:3pt;} (px, %) |
| border-style | p{border-style:thin;} (thick, groove, solid, outset, inset) |
| border-color | p{border-color:#ffccf;} (green) |
Here is a diagram from the W3C folks that shows how all the box and background properties relate:
Most browsers correctly intepret e.g. width:500px of an element to be its content. The whole element then has a width (height) = content + padding + borders + margins. However, IE 5.x/Windows takes e.g. width:500px; to be = content + padding + borders + margins. Therefore, the famous Box Model Hack was invented by Tantek Celik (see Zen p. 265.
And as final miscellaneous options, you can also design lists, tables, and even change the shape of the cursor. For this last one, try for example, body{cursor:crosshair} or body{cursor:pointer}.