Cuadros de bordes redondeados con CSS (I)

Desde hace algunos días estoy trabajando en el rediseño del sitio Cafe Montevideo. Uno de los retos fue crear cuadros con bordes redondeados Encontré en la web mil formas de hacerlo: algunas con CSS, otras con Javascript, algunas sin usar imágenes en las esquinas (bordes ásperos) y otras usando (bordes suavizados).

Exceptuando los que tenían Javascript, probé 30 códigos distintos y ninguno se mostraba correctamente. Cuando la mezcla era ya ininteligible y la paciencia estaba por agotarse, pensé en escribirlo desde 0. Al final quedó y quiero compartir el código (CSS + imágenes).

Imágenes (esquinas):

Código CSS:

#cuadro1{
width:178px;
padding:0px;
border: 0px;
background-color:#004892;
}
.arribaizquierda{
background: transparent url(arriba-izquierda.png) scroll no-repeat top left;
height: 20px;
padding: 0;
display: block;
}
.arribaderecha{
background: transparent url(arriba-derecha.png) scroll no-repeat top right;
height: 20px;
padding: 0;
display: block;
}
.abajoizquierda{
background: transparent url(abajo-izquierda.png) scroll no-repeat bottom left;
height: 20px;
padding: 0;
display: block;
}
.abajoderecha{
background: transparent url(abajo-derecha.png) scroll no-repeat bottom right;
height: 20px;
padding: 0;
display: block;
}

.medio{
display: block;
background: #004892;
margin:0px;
height: 138px;
}

Código HTML:

<div id="cuadro1">
<span class="arribaizquierda">
<span class="arribaderecha"></span></span>
<span class="medio">
<!– Contenido del cuadro (comienza) –>
texto, imagenes, etc.
<!– Contenido del cuadro (termina) –>
</span>
<span class=”abajoizquierda”>
<span class=”abajoderecha”>
</span></span></div>

Nota (importantísima): tengan cuidado si copian y pegan el código desde aquí porque podrían tener errores con las comillas (se pegan comillas no válidas).

Configurar los parámetros

• El atributo height de las clases .arribaderecha, .arribaizquierda, .abajoderecha y .abajoizquierda corresponde al alto de las imágenes que usamos para las esquinas.
• Para cambiar el color de fondo deben modificar background en #cuadro1 y las imágenes.
• El ancho del cuadro está definido por width en #cuadro1.
• El alto lo pueden dejar con padding en .medio (según el contenido) o con height en la misma clase (estático). No lo vayan a poner en #cuadro1.

Obviamente pueden agregar más parámetros, el código aquí presentado es básico.


Quizás parezca un poco largo pero tengan en cuenta que la mayor parte del código la pueden reutilizar para cuadros con anchos, largos y formatos distintos.

¿Qué son las líneas punteadas?

Las líneas punteadas indican el área “real” del cuadro, o sea el espacio donde pueden agregar contenido. Podría ocurrir que en algún caso quieran trabajar en todo el espacio visible (incluyendo bordes). La cuestión se complica un poquito en ese caso y preferiría publicarla en un artículo separado.

Ver Cuadros de bordes redondeados con CSS (II)

Programación | martin