Como redondear esquinas div

[miros84]

Pues, eso. Queria saber si el posible redondear las esquinas de los divs, ya que cuadrados son muy feos. Alguen sabe como hacerlo?

[Dalvenjha]

Métodos hay muchos, entre ellos la inclusión de divs sobrepuestos, la inclusión de imágenes o el "border-radius" aún no oficial, pero que se viene con el CSS3. Si fuera para un site mío usaría border radius, pero como no lo es, prueba usando imágenes. Puedes poner 4 imágenes que representen tus esquinas redondeadas dentro del div con una clase cada uno, y asignarle a cada uno una position:absolute; luego llevarían lo siguiente cada uno.

Código CSS:

.uno{
position:absolute;
left:0;
top:0;
z-index:1
}
 
 
.dos{
position:absolute;
right:0;
top:0;
z-index:1
}
 
 
.tres{
position:absolute;
left:0;
bottom:0;
z-index:1
}
 
 
.cuatro{
position:absolute;
right:0;
bottom:0;
z-index:1
}
 

Y listo, esas 4 imágenes tendrían que ir en cada uno de los divs que quieras redondear. Claro el contenido del div, deberá tener un z-index de por lo menos 2.

Si quieres especificaciones de border-radius, me avisas aqui.

Saludos!!

[miros84]

Muchas gracias por la explicacion.

[Dalvenjha]

¿Cómo y mi Karma? xD mentiraaaaaaaaa!!!!!!!!, espero que te haya servido amigo, para cualquier cosa consultalo simplemente.

Saludos!!

[Aresillo]

buenas..
en esta web de Mikmoro puedes encontrar tres ejemplos de cajas con esquinas redondeadas, que hasta que el border-radius se haga cross-brower, nos valen para dicho propósito:
http://www.araudi.net/

Un saludo

Ares

[Dalvenjha]

¿Hay algo malo en lo que puse? esperemos que pronto se pueda hacer standar eso, odio meter esas imàgenes o divs vacìos para algo tan simple.

Saludos!!

[dark_nexus]

aqui hay una serie de metodos para conseguir los round border..xD
tanto con css o con javascript

htt_p://w_ww.smileycat.com/miaow/archives/000044.php#nojavascript

quitales los _
aun no puedo poner links

[Aresillo]

Iniciado por Dalvenjha

¿Hay algo malo en lo que puse? esperemos que pronto se pueda hacer standar eso, odio meter esas imàgenes o divs vacìos para algo tan simple.

Creo que a todos nos gustaría poder usar el border-radius.. pero aun así.. todavía queda mucho tiempo para ello, al menos para que el común lo visualice...
Y bueno, yo veo de malo en tu solución que no está del todo explicada, aunque me parece buena. Por eso añadí las otras tres opciones que ofrece mikmoro en su web, y así que miros decida cual es la buena para el y use la que quiera.

Un saludo.

Ares

[Mikmoro]

Iniciado por Dalvenjha

¿Hay algo malo en lo que puse? esperemos que pronto se pueda hacer standar eso, odio meter esas imàgenes o divs vacìos para algo tan simple.

No, pero quizá deberías ser algo más explícito para ayudar al que hace la consulta.
Si usa el código que has puesto, en primer lugar necesitará que cada caja a la que ponga las cuatro esquinas tenga posicion relativa, o todo se irá al carajo. En segundo lugar, si incrusta las imagenes con etiquestas "img" en el código HTML de cada esquina, habrá que tener en cuenta cómo adecuar esas imágenes según el doctype que use, y si las pone como fondo, no se verá nada, porque las cajas no tienen ni ancho ni alto, que habría que añadir según el tamaño de las imágenes.

En fin, que personalmente no me parece el mejor método con CSS, pero al menos estaría bien explicarlo o apoyarlo con algún ejemplo o código real para cuando alguien encuentre este hilo haciendo una búsqueda, y que por lo menos sepa cómo hacerlo si es la manera que le interesa.