Foros del Web » Creando para Internet » CSS »

Como redondear esquinas div

Estas en el tema de Como redondear esquinas div en el foro de CSS en Foros del Web. Pues, eso. Queria saber si el posible redondear las esquinas de los divs, ya que cuadrados son muy feos. Alguen sabe como hacerlo?...
  #1 (permalink)  
Antiguo 24/02/2009, 07:16
Avatar de miros84  
Fecha de Ingreso: diciembre-2008
Mensajes: 351
Antigüedad: 9 años
Puntos: 4
Como redondear esquinas div

Pues, eso. Queria saber si el posible redondear las esquinas de los divs, ya que cuadrados son muy feos. Alguen sabe como hacerlo?
  #2 (permalink)  
Antiguo 24/02/2009, 08:02
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Como redondear esquinas div

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:
Ver original
  1. .uno{
  2. position:absolute;
  3. left:0;
  4. top:0;
  5. z-index:1
  6. }
  7.  
  8.  
  9. .dos{
  10. position:absolute;
  11. right:0;
  12. top:0;
  13. z-index:1
  14. }
  15.  
  16.  
  17. .tres{
  18. position:absolute;
  19. left:0;
  20. bottom:0;
  21. z-index:1
  22. }
  23.  
  24.  
  25. .cuatro{
  26. position:absolute;
  27. right:0;
  28. bottom:0;
  29. z-index:1
  30. }

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!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #3 (permalink)  
Antiguo 24/02/2009, 12:26
Avatar de miros84  
Fecha de Ingreso: diciembre-2008
Mensajes: 351
Antigüedad: 9 años
Puntos: 4
Respuesta: Como redondear esquinas div

Muchas gracias por la explicacion.
  #4 (permalink)  
Antiguo 24/02/2009, 14:42
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Como redondear esquinas div

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

Saludos!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #5 (permalink)  
Antiguo 24/02/2009, 17:57
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Como redondear esquinas div

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
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #6 (permalink)  
Antiguo 24/02/2009, 21:54
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Como redondear esquinas div

¿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!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #7 (permalink)  
Antiguo 25/02/2009, 04:33
 
Fecha de Ingreso: octubre-2007
Ubicación: Berlin
Mensajes: 51
Antigüedad: 10 años, 1 mes
Puntos: 1
Respuesta: Como redondear esquinas div

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
  #8 (permalink)  
Antiguo 25/02/2009, 07:13
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Como redondear esquinas div

Cita:
Iniciado por Dalvenjha Ver Mensaje
¿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
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #9 (permalink)  
Antiguo 25/02/2009, 11:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como redondear esquinas div

Cita:
Iniciado por Dalvenjha Ver Mensaje
¿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.
__________________
Visita mi nueva web idplus.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:25.