Bordes redondos crossbrowser

8/ago/2006 20

Mucho se usa en el diseño web el recurso de los bordes redondeados, principalmente en formas que soportan cajas de texto. Esto se hacía fácilmente utilizando una tabla y varias celdas, y éstas se adaptaban fácilmente al tamaño del contenido. Ahora, son otros tiempos. El mundo cambia, y existen varios métodos para lograrlo sin las desprestigiadas tablas. Estos métodos incluyen imágenes (GIF), JavaScript con CSS o sólo CSS. En esta ocasión, mostrare un método que utiliza sólo CSS para su diseño, lo que nos ahorra unos cuantos bytes de peso y se adapta fácilmente a lo que contiene, sean imágenes o sólo texto. Además, te sacas la lata de andar cortando esos bordecitos en Photoshop y que calcen unos con otros.

El Método

Explico esto para que se acostumbren a saber cómo funcionan las cosas, y no sólo corten-peguen. Así, si necesitan modificar algo, ya saben por dónde comenzar a buscar. Usaremos un cuadrado de 20 x 20 px con el fondo del sitio. Luego, usaremos un bullet con el color de la caja. Para este ejemplo, usaremos el fondo rojo #C00 y la caja gris #CCC.

El HTML: En el ejemplo puedes disfrutar del código, presionando View Source en tu browser favorito.

Ver Ejemplo

Link: Rounded Corners Without Images

PD. Probado en: Mac [Safari, Firefox, Opera, Flock, SunriseBrowser, Camino; Windows [Firefox]. Si alguien ve algun detalle en IE de Win, que trate de ver que es.

Comentarios

  1. seba [#]

    Bueno el tip, en FireFox se ve muy bien y además no es tanto el código que hay que agregar…

    Serían buenos más tips de estos, siempre es bueno seguir aprendiendo…

    Saludos!

  2. CSSLab Admin [#]

    Buscaré más de estos códigos, fáciles de implementar y los publicaré aquí. Salu2

  3. Neox [#]

    Hola, te voy a dejar un link que les servira mucho con esto de los bordes redondos.
    Buen Tips,

    Saludos

    Danny

  4. Neox [#]

    Ups me olvide del Link
    http://www.html.it/articoli/niftycube/index.html

    jeje

    Saludos,

    Danny

  5. Daniel m. [#]

    Muy buena tecnica, pero me preocupa el uso excesivo (no tan excesivo es cierto )de divs , la idea es no caer en la “divitis”, creo q es mas facil y sano por el bien del marcado usar el metodo de remplazar texto por imágenes, no lo creen.?

  6. Héctor [#]

    Es la mejor técnica que he visto hasta ahora en cuanto a rapidez, compatibilidad y sencillez. Pero he observado que en internet explorer cuando el box tiene más de 19 em (25 por ejemplo) sale una pequeña línea por debajo.

    Sabes como puedo solucionarlo o a que es debido?

    Salu2 y enhorabuena por esta gran web 😉

  7. CSSLab Admin [#]

    Como no uso windows, me cuesta verificar exhaustivamente los codigos en CSS, muchas veces solo lo hago superficialmente. en este caso fue asi. no se me ocurre q pueda ser, verificare ne la web si existe ya una solucion. probare el niftycube (JS) y si es simple y facil, lo implemnentare. Saludos.

  8. luis [#]

    muy util te muestra mejor con los estilos
    gracias

  9. Piut [#]

    En IE 6 no se ve bien. Aparecen unas líneas rectas verticales al final de DIV. Es raro.

  10. CSSLab » + bordes redondos [#]

    […] Un interesante recurso utilizado por diseñadores es de utilizar bordes redondeados para delimitar secciones en sus sitios web. En CSS no es tan simple lograrlo, a veces implica utilizar más de un DIV contenedor para abrir y cerrar los bordes, además de que nos impide que éstos sean líquidos (o elásticos). navegando, me encuentro con 2 soluciones que se ven bien prometededores, y son realmente crossbrowser (no como en el que publiqué hace un tiempo, donde al parecer tiene problemas con IE6). […]

  11. Pablo [#]

    Es muy bueno. Me ha venido muy bien!!! muchas gracias!!!

  12. Martin [#]

    Es el mejor metodo que vi… hasta que lo probe browsershots :(

    http://browsershots.org/http://www.csslab.cl/ejemplos/redondo.html

    En unos cuantos navegadores se ve mal, pero el que mas me preocupa es el Firefox 2.0.0.12 en Ubuntu 7.10
    http://browsershots.org/screenshots/73ef7c04c7c096158cf017f1f7ed9b9b/

    Es raro, porque con el mismo navegador pero en windows se ve perfecto.

    Tambien en Ubuntu 7.10 pero en Firefox 3 se ve mal, mejor dicho, no se ve perfecto. Es nose… un pixel nada mas en la altura de los bullet de arriba:
    http://browsershots.org/screenshots/96820aff200d17f68d9873114313e901/
    Aclaro que en Windows XP con la misma version (Firefox 3) se ve bien.

    Y tambien en Safari no se ve perfecto, en todas las versiones para todos los SO.
    http://browsershots.org/screenshots/232d45e84c747564b107ac04348489ea/

    Los bullet de abajo quedan medio mal. Si los achicas se nota mas que no estan igual que los de arriba.

    Me parece, que la mejor opcion sigue siendo usar imagenes. Aunque no me gusta usar muchas imagenes, pero me parece que hoy en dia sigue siendo la mejor opcion. Porque las versiones con CSS JS tampoco me convencen. Tardan en renderizar y se nota que son cuadrados y despues se hacen redondos…

    Ojala se pueda mejorar este metodo, porque me encanto 😀

  13. juanma [#]

    muchas gracias lo estaba necesitando! :)

  14. Julian Tun [#]

    Saludos, funciona perfectamente en IE6, gracias por este ejemplo.

  15. deivieb [#]

    Hola,
    es una técnica interesante, solo falta pulirla para IE6, falla por un borde exterior. Otra técnica parecida, que también usa solo DIVS y CSS. la encontre en:
    http://www.spiffycorners.com/index.php

    Luego, para ver el resultado final en diferentes versiones de IE (6,7,8 beta2) teneis soluciones como:
    http://ipinfo.info/netrenderer/
    ó
    http://www.my-debugbar.com/wiki/IETester/HomePage
    esto último está mas orientado a desarrolladores.
    saludos,

  16. Celdas con bordes redondeados | hilpers [#]

    […] Celdas con bordes redondeados Deje de usar las imagenes al toparme con este ejemplo: http://www.csslab.cl/?p=64 […]

  17. DIANA [#]

    muy buen aporte, es una excelente técnica facil de implementar y de modificar.

  18. c.bautista [#]

    es una excelente técnica! me parece muy fácil de impremental, y sin mayor problema, incluso estuve probando convinandola con otros ejercicios de este mismo sitio, como las quote y demas y funciona de maravilla!

    sólo tengo una pequeña duda: en mi dreamweaver aparecen las esquinas flotando un tanto dispersas, en el explorador se ve de maravilla, pero en el editor no se ven con el mismo orde, monté el ejemplo en el dreamweaver y sucedió lo mismo, esto se debe a que algo está mal?

    en fin, gracias de todos modos! buenos tutoriales.

  19. Jorge Epuñan [#]

    c.bautista: no confies en dreamweaver; menos en su editor visual… no es referencia alguna. los browsers son los q finalmente despliegan la pagina y donde deberias de probar siempre. Confia en el codigo y en ti mismo.

    Exito.

  20. sss [#]

    ssss

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab