English Português

Las esquinas y bordes redondeados son parte natural del diseño web, pero siempre han representado un dolor de cabeza para implementarlas; hay métodos con javascript, con imágenes, html y css. Sin embargo, cada vez esta más cerca la implementación de CSS3 en los navegadores más populares y con ella, la posibilidad de crear bordes redondeados solo con css (y sin imágenes), entre otras atractivas características.

Crear bordes redondeados con CSS3

La propiedad encargada de crear los bordes en las esquinas es border-radius, pero dado de su carácter de borrador, los navegadores agregan una sintaxis adicional.

Ejemplo, para crear un contenedor de 3px de radio en las esquinas basta el siguiente código:

#contenedorr3 { 
border-radius:3px; 
-moz-border-radius:3px; /* Firefox */ 
-webkit-border-radius:3px; /* Safari y Chrome */ 

/* Otros estilos */ 
border:1px solid #333;
background:#eee;
width:100%;
padding:5px;
}

Aplicado a cualquier contenedor html con id=contenedorr3; por ejemplo:

<div id="contenedorr3">
<p>Este es un contenedor con bonitos bordes redondeados de 3px</p>
</div>

El resultado, algo como lo siguiente:

bordes-redondeados-css3

También es posible especificar esquina por esquina, el radio de curvatura. Por ejemplo:

#contenedorr10{
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:0px;

-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:0px;

/* Otros estilos */ 
border:1px solid #333;
background:#eee;
width:100%;
padding:5px;
}

Que tendría por resultado lo siguiente:

bordes-redondeados2-css3

Claro, visibles de este modo en los navegadores compatibles con esta característica.

Navegadores compatibles con border-radius

Las navegadores compatibles con esta característica son:

No la soportan:

  • Internet explorer.
  • Opera.

Aunque en ambos casos, confirmaron una próxima incorporación de esta característica.

Conclusión

Aun falta un tiempo para tener esta propiedad tenga un alto soporte, pero sin duda que podemos iniciar su uso. Al usarlo en el diseño web, los usuarios con navegadores más actuales podrán disfrutar de un diseño completo y los usuarios con otros navegadores no tendrán una gran afectación en el uso del sitio y con una versión al tamaño de su navegador.

En lo personal, cada vez uso más esta propiedad y empiezo a olvidarme de las laboriosas técnicas con imágenes. Por suerte la famosa guerra de los navegadores esta acelerando la creación y adopción de mejores plataformas web y no son pocos los usuarios ya con acceso a esta y otras características.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Comentarios

  1. Abbey / Hace 5 años /

    Muchos gracias por la información! En algún lugar me enteré que en IE se aplicaban bordes redondos con -ms (en lugar de -moz o -webkit), pero obviamente no funciona (ni en 7 ni en 8) ¿Sería esa la próxima incorporación?

    Responder a Abbey →
  2. saiseihogo / Hace 5 años /

    Creo que has olvidado mencionar que se puede especificar cada esquina en una sola linea…

    Ejemplo:

    border-radius: 3px 10px 2px 10px;

    Responder a saiseihogo →
  3. saiseihogo / Hace 5 años /

    Otra cosa… opera si lo soporta, pero en su versión 10.5 (alpha 1)

    Responder a saiseihogo →
  4. Francisco / Hace 5 años /

    @Abbey en teoría IE9 soportará css3, el reto de nuevo será que el usuario lo adopte rápido, pues siguen habiendo muchos IE6 y hasta 5 entre los navegantes.

    @saiseihogo Buen apunte el de la notación abreviada, también me brinque los bordes elípticos que tienen aun menos soporte.

    Lo de Opera me animo más a usar más de lleno esta propiedad, gracias por los aportes.

    Un saludo! :)

    Responder a Francisco →
  5. Tepi / Hace 5 años /

    Que lástima que Opera no lo soporte (mi navegador favorito!). Es una propiedad que ahorraría mucho trabajo a los diseñadores.

    Responder a Tepi →
  6. Rubix / Hace 5 años /

    ¿Internet explorer no lo soporta? ¿Cómo es posible eso?

    [mode ironic = off]

    Saludos!

    Responder a Rubix →
  7. Francisco / Hace 5 años /

    @Tepi Aunque saiseihogo ya nos adelantaba esta disponible en versión beta, así que pronto estará del lado de los que soportan css3 -parcialmente al menos-

    @Rubix sí, raro, IE siempre esta pendiente de lo nuevo para integrarlo.

    Responder a Francisco →
  8. Javier y German / Hace 5 años /

    ¡Hola Francisco!
    Lo primero felicitarte por la tremenda página que tienes :) , y, aunque sea la primera vez que comentamos aquí, queríamos consultarte un problemilla que nos ha surgido estos días.
    Todo empezó (creemos que empezó) tras pasar de un dominio gratuito nuestro blog, a uno propio (.com). Vimos que en IE, tras efectuar el cambio en el panel de Blogger, gran parte de la interfaz de la página empezó a fallar:
    El tamaño de la letra se veía (sigue viéndose) bastante pequeña, lo que ha producido que algunos elementos queden bastante perjudicados, pero ahí no acaba la cosa…
    También habíamos agregado unos cartoncitos a los lados del blog, que ahora ya no se ven.
    No sé si podrías recomendarnos algo o alguna solución, ya que eres toda una máquina en este asunto ;) , quizás se deba al tema del dominio (¿?).
    Por cierto, en Mozilla Firefox, Safari y Google Chrome no hay ningún problema, por lo que no logramos entenderlo, y como IE es el navegador que más se utiliza, supone un gran problema….

    P.D. Tampoco estamos muy seguros de que en Internet Explorer se vea mal, al menos es lo que nos sale, y lo que nos han dicho algunas personas :(

    Un saludo y ¡feliz navidad!
    Javier y German.

    Responder a Javier y German →
  9. Mitidiero / Hace 5 años /

    Primeiro quero felicitar-lhe pela página, e dizer que o artigo está muito bom, bordas arredondadas é algo que realmente da um estilo mais leve ao site.

    Abraços do Brasil,

    Luiz Mitidiero

    Responder a Mitidiero →
  10. Francisco / Hace 5 años /

    @Javier, German no creo que se deba al cambio de dominio; al menos no del todo. Los problemas de un cambio de dominio en blogger pueden ser que algunas imágenes del diseño fallen, en tal caso puedes rehospedarlas en un servicio gratuito como imageshack o photobucket.

    Lo del texto en el sidebar más pequeño, creo que se debe a que no tiene declarado un tamaño de letra font-size y cada navegador ponle la que quiere y como siempre IE es que peor lo hace. Ojalá lo corrija.

    Un saludo y feliz año!

    PD: Si puedes regresar los créditos al template sería genial ;)

    Responder a Francisco →
  11. Francisco / Hace 5 años /

    @Mitidiero Muchas gracias por el comentario. Feliz año nuevo! :)

    Responder a Francisco →
  12. Reynosa Blogs / Hace 5 años /

    gracias por el dato y exito 20.10 ;)

    Responder a Reynosa Blogs →
  13. Francisco / Hace 5 años /

    @Reynosa igualmente para ti, feliz año! :)

    Responder a Francisco →
  14. Domingo Lázaro / Hace 5 años /

    Muy buena página para los estilos me funciona en mozilla muy bien el problema es que la mayoría de las personas que visitan las paginas utilizan explorer y no aceptas los estilos o necesito algún hack para que muestre los estilos

    Responder a Domingo Lázaro →
  15. Mik / Hace 5 años /

    A quien pueda interesar, estoy viendo perfectamente los bordes redondeados de los ejemplos tanto con IE8 como con Opera 10.50 Beta.

    Responder a Mik →
  16. Javier y Germán / Hace 5 años /

    Hola de nuevo Francisco!
    Bueno, perdon por responder tan tarde, y gracias por tu respuesta, ya lo solucionamos. Al parecer estaba repetida la propiedad font-size por ahi escondida, y claro, por más que la cambiabamos en el body no hacia ni caso :(
    Afortunadamente, ya se ve bien :D
    Por cierto, los créditos de la plantilla siguen en el final, pues era una plantilla muy buena y nunca los hemos quitado ;) , aunque puede que pronto demos un cambio y pongamos una plantilla nueva :)
    P.D.: Mik, se ve en IE porque son imágenes, cosa que puede engañar un poco, pero desafortunadamente, siguen sin funcionar en esos navegadores :)
    ¡Muchos saludos!

    Responder a Javier y Germán →
  17. Francisco / Hace 5 años /

    @Javier Me alegro encontraras el problema :)

    Responder a Francisco →
  18. DriverOp / Hace 5 años /

    Mik: puedes ver los bordes redondeados en IE8 porque Francisco ha puesto una imagen de cómo debería verse, no es un ejemplo funcional con CSS3 ;) .

    Opera 10.50 final soporta esta propiedad.

    Responder a DriverOp →
  19. marcos / Hace 4 años /

    hola, la pagina espectacular, quisiera saber si se puede realizar la propiedad en 2 navegadores juntos que la soporten, por ej en el de gooble y el firefox al mismo tiempo o tengo que elegir uno solo si o si?
    exitos para todos

    Responder a marcos →
  20. cesar / Hace 4 años /

    Que tal…Gracias por el aporte, solo tengo una pregunta, si tengo una imagen o un fondo guardado como .jpg y lo quiero poner dentro del contenedor como es la instrucción… gracias

    Responder a cesar →
  21. Francisco / Hace 4 años /
    Responder a Francisco →
  22. Gonzalo / Hace 3 años /

    IE Apesta!

    Responder a Gonzalo →
  23. lluis / Hace 3 años /

    muy interesate, muchas gracias

    Responder a lluis →
  24. Víctor / Hace 1 año /

    muchas gracias, me sirvió mucho

    Responder a Víctor →
  25. Daniel P Z / Hace 11 meses /

    Muchas gracias por el codigo man, me recontra sirvio, pero no le puse borde, asi quedo bien igual

    Gracias! :D

    Responder a Daniel P Z →
  26. dgsdgsd / Hace 8 meses /

    sfasf asf asf asf af

    Responder a dgsdgsd →

Responder

¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

Términos de uso - Política de privacidad