Estilos>>Técnicas
Con ese termino nos referimos a los muros que forman una casa.
Con cuatro "ladrillos" especiales podemos hacer que las uniones de los muros de la casa sean redondeadas.
El primer paso sería crear un contenedor general (en el ejemplo se ha denominado "bordesredondos") en el que situaremos los elementos que deseamos poner en el recuadro redondeado y asignarle las dimensiones, los márgenes y el color de fondo.
Dentro del contenedor general situaremos tres "filas" de elementos:
El código CSS en la cabecera o en un archivo externo.
/* ancho y márgenes de la caja */
.bordesredondos { width: 20em; margin: auto; }
.bordesredondos { background: url(imagenes/fondo.gif) repeat; }
/* imágenes de fondo para las esquinas */
.arribaizq { background: url(imagenes/arriba_izq.gif) no-repeat top
left; }
.arribader { background: url(imagenes/arriba_der.gif) no-repeat top
right; }
.abajoizq { background: url(imagenes/abajo_izq.gif) no-repeat bottom
left; }
.abajoder { background: url(imagenes/abajo_der.gif) no-repeat bottom
right; }
/* ancho y alto de las esquinas */
.arribaizq, .arribader, .abajoizq, .abajoder { width: 100%; height:
1em; }
/* deplazamiento de las esquinas inferiores para disminuir la distancia
al contenido */
.abajoizq, .abajoder { margin-top:-1em; }
/* detalles del contenido */
.contenidocaja { margin: 0 1em; }
El código HTML en el cuerpo de la página.
<div class="bordesredondos">
<div
class="arribaizq"><div
class="arribader"></div></div>
<div
class="contenidocaja">
Aquí va el
texto que aparece en la caja
</div>
<div
class="abajoizq"><div
class="abajoder"></div></div>
</div>