Esquinas redondeadas con CSS

Un poco farragoso quizás, pero perfectamente visible en todos los navegadores y sin necesidad de crear, almacenar y utilizar diversas imágenes.

El truco está en crear líneas de 1px de altura (2 y 3 en las zonas menos pronunciadas) que van disminuyendo su anchura progresivamente. Las líneas así construidas, se apilan y en sus extremos simulan una esquina redondeada. Para construir las líneas de distinto tamaño, utilizamos 9 bloques (DIV) aplicando márgenes distintos.

Este es un texto encerrado en una caja con esquinas redondas. No importa el tamaño del texto, porque la parte central conserva las dimensiones necesarias.

Este sería el código CSS a instalar antes de ]]></b:skin>

#caja {
width: 400px; /*ANCHO TOTAL DE LA CAJA*/
color: #990000; /*COLOR DEL TEXTO*/
text-align:center;
margin:0px auto;
}

.redondeado {
height: 1px;
overflow: hidden;
background-color: #cccccc; /* COLOR DE LA CAJA */
}

/* LAS LINEAS PARA FORMAR LA PARTE REDONDEADA */
.r1 { margin: 0 12px;}
.r2 { margin: 0 9px;}
.r3 { margin: 0 7px;}
.r4 { margin: 0 6px;}
.r5 { margin: 0 5px;}
.r6 { margin: 0 4px;}
.r7 { margin: 0 3px;}
.r8 { margin: 0 2px; height: 2px;}
.r9 { margin: 0 1px; height: 3px; }

.contenido {
height: auto;
padding: 0 15px;
}

Ahora para formar la caja en cualquier post o artilugio, lo hacemos de la siguiente manera:

<div id="caja">
<div class="redondeado r1"></div>
<div class="redondeado r2"></div>
<div class="redondeado r3"></div>
<div class="redondeado r4"></div>
<div class="redondeado r5"></div>
<div class="redondeado r6"></div>
<div class="redondeado r7"></div>
<div class="redondeado r8"></div>
<div class="redondeado r9"></div>
<div class="redondeado contenido">Este es un texto encerrado en una caja con esquinas redondas. No importa el tamaño del texto, porque la parte central conserva las dimensiones necesarias.</div>
<div class="redondeado r9"></div>
<div class="redondeado r8"></div>
<div class="redondeado r7"></div>
<div class="redondeado r6"></div>
<div class="redondeado r5"></div>
<div class="redondeado r4"></div>
<div class="redondeado r3"></div>
<div class="redondeado r2"></div>
<div class="redondeado r1"></div>
</div>

Como decía al principio, quizás un poco farragoso, pero con ir copiando y pegando el código necesario allá dónde lo necesitemos, la cosa se simplifica bastante. Hay que tener en cuenta que blogger mete saltos de línea entre DIV's si estos se redactan dentro de un post, tal y como se muestran aquí. En ese caso, basta con escribir el código todo seguido (sin retornos de carro).

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter