Estilos>>Técnicas

Cajas con esquinas redondeadas

Cuatro esquinas

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:

  1. El borde superior con las esquinas redondeadas: utilizamos un contenedor genérico div que lleva como fondo la esquina izquierda y anidamos dentro del mismo otro contenedor genérico div que tiene como fondo la esquina superior derecha. Si en lugar de anidar los contenedores genéricos los hubiéramos puesto uno a continuación de otro, cada uno de ellos ocuparía el 100% de la anchura del contenedor general y se colocarían uno bajo el otro.
  2. El contenido del recuadro.
  3. El borde inferior y sus esquinas redondeadas: seguimos el mismo procedimiento que para el borde superior.
La imágenes que hemos utilizado para las equinas son las siguientes: Esquina superior izquierda Esquina superior derecha Esquina inferior izquierda Esquina superior derecha. También se ha  utilizado una imagen Imagen de fondo para el fondo general de la caja aunque, dado que se trata de un color plano, podríamos haber optado por asignarle un color de fondo en lugar de utilizar una imagen.

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; }

En caso de que el código css vaya en un archivo externo habrá que ajustar las rutas de las imágenes tomando como punto de partida el archivo css que es el que contiene la llamada.

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>