Guía: Esquinas redondeadas con CSS y una imagen para todos los navegadores

[Null_]

Quizás es un tema que ya se ha resuelto, pero quiero dar mi aporte por acá y recordar que se pueden lograr las esquinas redondedas sin necesidad de CSS3 ni javascript.

Bien, mi método es utilizar una sola imagen, por lo que la carga y la petición es inferior al método de 2 o 4 imágenes para las esquinas. Dentro del CSS, se utiliza primordialmente margin, padding y background. Lo demás es solo estilo tuyo.

Quizás la única desventaja es utilizar 6 divs por caja, aunque por lograr este efecto eso no es nada: solo estropeo visual del código con una etiqueta neutra y no se pierde nada de funcionalidad.

Bien, el truco se basa en lo siguiente:

[...] utilizo una sola imagen que contiene las cuatro esquinas juntas formando un circulo, la que en los primeros cuatro divs se posiciona con CSS sin repetirse en cada una de las esquinas. El quinto div cubre 1/2 de cada imagen con rellenos (padding) laterales de tamaño de la mitad de la imagen más un color de fondo, y el último cubre 1/2 de las partes de las imagenes restantes con un margen negativo superior e inferior con las mismas características del anterior.

Un ejemplo:

Código HTML:

<div class="caja2"><div class="c1"><div class="c2"><div class="c3"><div class="c4"><div class="c5"> 
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra metus nec augue feugiat sed facilisis libero convallis.</p> 
</div></div></div></div></div></div> 

Código:

.caja2, .caja2 .c1, .caja2 .c1 .c2, .caja2 .c1 .c2 .c3 {
	background:url('redondo2.png') transparent no-repeat;
}

.caja2 .c1 .c2 .c3 .c4, .caja2 .c1 .c2 .c3 .c4 .c5 {
	background-color:#088;
}

.caja2 {
	width:300px;
	color:#FFF;
	margin:0 5px 10px;
	float:left;
	background-position:bottom right;
}

.caja2 .c1 {
	background-position:top right;
}

.caja2 .c1 .c2 {
	background-position:top left;
}

.caja2 .c1 .c2 .c3 {
	background-position:bottom left;
	padding:0 8px;
}

.caja2 .c1 .c2 .c3 .c4 {
	padding:8px 0;
}

.caja2 .c1 .c2 .c3 .c4 .c5 {
	padding:0 8px;
	margin:0 -8px;
}

.caja2 p, .caja2 ul, .caja2 ol {
	margin:0;
	padding:0;
}

Pueden ver ejemplos funcionando con explicaciones detalladas al final de las hojas de estilo aquí:
http://www.documentoweb.com/ejemplos...dondeadas-css/

Lo genial del código es que funciona correctamente en IE5.5, IE6, IE7, IE8, Firefox, Chrome, Safari y Opera. Y además de esquinas, podemos agregarle sus "add-ons" de bordes y degradados jaja.

Cualquier duda o mal funcionamiento, me avisan :P.
Saludos.

El artículo principal:
http://www.documentoweb.com/CSS/Esqu...CSS-e-imagenes

[cristian_cena]

hola Null, buena técnica, y buen sitio el tuyo Siga así, un abrazo.