Borde redondeado con xhtml y css

Como me ha parecido curioso lo que hay que hacer para poder hacer un recuadro con esquinas redondeadas, escribo esta entrada.
De entrada parece que no existe forma de indicárselo directamente al navegador en el css y que el navegador dibuje los bordes redondeados de un marco con un radio determinado, cosa que no entiendo con la cantidad de páginas que hay con bordes redondeados.

La única forma que parece existir es usando pequeñas imágenes tanto para las cuatro esquinas como para los cuatro laterales del recuadro.

En teoría esto se puede hacer de dos formas usando tablas o con xhtml y css, pero parece ser que el uso de tablas no es bueno para maquetar las páginas porque es muy rígido y no funciona bien con contenido dinámico entre otras muchas razones que dan los diseñadores web, se podría decir que cada vez que alguien maqueta con tablas El Monstruo de Espagueti Volador mata un gatito. Así que la forma correcta de hacerlo es mediante el uso de xhtml y css.

El primer paso entonces es crear las imágenes, en este caso las esquinas tienen un tamaño de 8×8 pixeles, y los laterales 8×1 (están ampliados a 8×8 para que sea vea algo):

Esquina superior izquierda Lateral superior Esquina superior derecha
Lateral izquierdo Lateral derecho
Esquina inferior izquierda Lateral inferior Esquina inferior derecha

El código xhtml sería algo semejante a esto:


<div id="recuadro">
<div class="recuadro_arriba">
<div class="recuadro_esquina_superior_izquierda"> </div>
<div class="recuadro_esquina_superior_derecha"> </div>
</div>
<div class="recuadro_contenido">
<div class="recuadro_lateral_derecho">
Contenido
</div>
</div>
<div class="recuadro_abajo">
<div class="recuadro_esquina_inferior_izquierda"> </div>
<div class="recuadro_esquina_inferior derecha"> </div>
</div>
</div>

El código css sería algo como esto:


.recuadro { background:color_del_fondo_del_recuadro }
.recuadro_lateral_derecho { padding:8px 8px;background:url(imagenes/lateral_derecho.jpg) right repeat-y;}
.recuadro_contenido { background:color_de_fondo_del_recuadro url(imagenes/lateral:izquierdo.jpg) repeat-y;}
.recuadro_arriba{ height:8px;background:url(imagenes/lateral_superior.jpg);position:relative;}
.recuadro_esquina_superior_izquierda, .recuadro_esquina_superior_derecha, .recuadro_esquina_inferior_izquierda, .recuadro_esquina_inferior_derecha{ width:8px;height:8px;line-height:1px;font-size:1px;}
.recuadro_esquina_superior_izquierda{ float:left;background:url(imagenes/esquina_superior_izquierda.jpg);}
.recuadro_esquina_superior_derecha{ float:right;margin-right:0px;background:url(imagenes/esquina_superior_derecha);}
.recuadro_lateral_inferior{ width:100%;height:8px;line-height:0px;font-size:1px;background:url(imagenes/lateral_inferior.jpg) repeat-x bottom;height:8px}
.recuadro_esquina_inferior_izquierda{ float:left;background:url(imagenes/esquina_inferior_izquierda.jpg);}
.recuadro_esquina_inferior_derecha{ float:right;margin-right:0px;margin-down:0px;background:url(imagenes/esquina_inferior_derecha.jpg);}

El resultado:
Bordes redondeados
Se agradecen correcciones

Los comentarios están cerrados.