Custom Bordered Boxes

Images on All Sides

Use this technique when all four sides of the box require a custom image border.

<div class="cB">
  <div class="cBw"><div class="cBt"><div></div></div>
    Content
  <div class="cBb"><div></div></div></div>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Construction

Two images are used. The "leftright" image is a piece of the middle of the box which can be repeated vertically (allows very long content if needed). The other "topbottom" image holds the top and bottom of the box (background positioning allows us to use this for both sections, saving a request on the server). Both images are very wide (which usually doesn't "cost" additional bandwidth thanks to PNG/GIF compression).

div.cB is our "custom box". Its right padding allows the right edge of the leftright image to remain visible while div.cBw nested inside provides the left side of the leftright image. By placing set of nested DIVs before and after the box content, the same technique can be used to display the top and bottom of the box image.

Caveat (all methods)

Depending on the size of your corners, you may need to use negative margins on your content to pull it into the top and bottom spaces. If you find the topbottom image overlaps your text, you can "carve out" the inside of this image to be transparent just inside the border.

Creating the images

Here is the Fireworks MX source file for creating several of the images used.

wd.mrclay.org (coming...eventually) 10/3/2004.