Bordes redondos crossbrowser

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.

  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. Pablo

    Es muy bueno. Me ha venido muy bien!!! muchas gracias!!!
  11. 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 :D

  12. juanma

    muchas gracias lo estaba necesitando! :)

  13. Julian Tun

    Saludos, funciona perfectamente en IE6, gracias por este ejemplo.
  14. 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,
  15. DIANA

    muy buen aporte, es una excelente técnica facil de implementar y de modificar.
  16. 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.
  17. 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.
  18. sss

    ssss
  1. [...] Un interesante recurso utilizado por diseñadores es de utilizar bordes redondeados para delimitar secciones en sus sitios web. En ...
    CSSLab » + bordes redondos
  2. [...] Celdas con bordes redondeados Deje de usar las imagenes al toparme con este ejemplo: ...
    Celdas con bordes redondeados | hilpers