Juglar / v.CIII

El objetivo es que la caja que contiene el texto tenga relieve. Para ello seguimos el ejemplo de Tedd, usando ocho gifs pequeños: uno para cada esquina, y uno para cada lado. La altura de la caja se adapta al contenido.

El CSS

body {
margin: 0;
padding: 0;
text-align: center;
}

#box {
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 3em;
padding: 0;
text-align: left;
width: 40em;
}

#content {
padding:3em;
}

#tlc, #trc, #blc, #brc {
background-repeat: no-repeat;
}

#tlc {
background-image:url(images/tlc.gif);
background-position: 0% 0%;
}

#trc {
background-image:url(images/trc.gif);
background-position: 100% 0%;
}

#blc {
background-image:url(images/blc.gif);
background-position: 0% 100%;
}

#brc {
background-image:url(images/brc.gif);
background-position: 100% 100%;
}

#tb, #bb {
background-repeat: repeat-x;
}

#tb {
background-image:url(images/tb.gif);
background-position: 0% 0%;
}

#bb {
background-image:url(images/bb.gif);
background-position: 50% 100%;
}

#rb {
background-image:url(images/r.gif);
background-position: 100% 0%;
background-repeat: repeat-y;
}

#lb {
background-image:url(images/l.gif);
background-position: 0% 100%;
background-repeat: repeat-y;
}

Siendo:
tlc = top left corner
trc = top right corner
blc = bottom left corner
brc = bottom right corner
lb = left border
rb = right border
tb = top border
bb = bottom border

El HTML:

<div id="box">

<div id="lb">

<div id="rb">
<div id="bb"><div id="blc"><div id="brc">
<div id="tb"><div id="tlc"><div id="trc">

<div id="content">

contenido

</div>

</div></div></div></div>
</div></div></div></div>

</div>

Y las imágenes serían:

Ref:
Torresburriel.com
Torresburriel.com
Blogpocket