DIVs con bordes redondeados en CSS y sin Javascript

Revolviendo un poco el diseño de PHPBB3, encontré por allí una forma fácil para obtener bordes redondeados con CSS sin tener que recurrir a javascript.

Lo más interesante reside en las imágenes que utilizaremos. Éstas serán dos GIFs transparentes que, su color debe ir de acuerdo al fondo de nuestra página. Si el fondo es de color blanco, serían de la siguiente manera:

En donde el área oscura-cuadriculada es la región transparente.

El tamaño de la imagen, para que pueda ser apreciada es de 120 x120 px.

Necesitamos cortar la imagen en dos partes, quedando de la siguiente manera:





Ahora, dependiendo de que tan “redondeadas” quieres las esquinas, es el tamaño que le daremos a la imagen, el tamaño sugerido es de 12x6 px para cada una:





Lo sé, no las puedes ver, pero están allí . Las he llamado: "LC.gif" y "RC.gif" respectivamente.

Ahora en nuestro CSS necesitaremos lo siguiente:

Código :

/* Este es el contenedor al que le pondremos bordes redondos */
div.round{
   width:300px;
   height:auto;
   background:#ECF5FF;
}
/* En este contenedor va todo lo que queremos mostrar. No le damos margen vertical puesto ese lo generarán los span del borde */
div.contenido{ 
   margin:0 10px;
}
/* Generamos los estilos de las span, los cuales contendrán las imágenes GIF */
span.top, span.bottom{
   width:100%;
   height:6px; /* El alto debe ser la mitad de alto de la imagen GIF */
   display:block;
}
/* A continuación viene el verdadero truco, la posición de las imágenes de fondo es importante*/
span.top {
   background:url(LC.gif) top left no-repeat; 
}
span.bottom{
   background:url(LC.gif) bottom left no-repeat;
}
span.top span, span.bottom span{
   width:6px; /* De acuerdo al tamaño de la imagen GIF */
   height:6px; De acuerdo al tamaño de la imagen GIF */
   float:right;
   font-size:6px; /* Esto es para IE6, que no respeta el height del span si el tamaño de letra es mayor a este  */
}
span.top span{
   background:url(RC.gif) top right no-repeat;
}
span.bottom span{
   background:url(RC.gif) bottom right no-repeat;
}

Ahora en nuestra página utilizamos el estilo de la siguiente manera:

Código :

   <div class="round">
       <span class="top"><span></span></span>
       <div class="contenido">           
           Esto es el contenido del DIV con bordes redondeados
        </div>
        <span class="bottom"><span></span></span>
    </div>

Y esto es una muestra del resultado:

Las ventajas de hacerlo de esta forma es que:

• Puedes cambiar de color tu contenedor sin tener que cambiar las imágenes de los bordes.
  
• Puedes darle al contenedor ancho o alto relativos y no pierde su diseño.
  
• Incluso puedes dar un efecto de fondo degradado sin tener que cambiar las imágenes de los bordes. Por ejemplo:

• O puedes incluso utilizar un patrón de fondo y tampoco afecta.

Espero y les sirva.

Saludos.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.