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, CSS3 ya es una realidad en todos 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:
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:
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:
- Mozilla Firefox (Gecko), desde su versión 1.0.
- Safari (Webkit), desde su versión 3.0.
- Google Chrome, desde su versión 1.0.
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.
Abbey diciembre 28, 2009 a las 10:07 am
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?
Respondersaiseihogo diciembre 28, 2009 a las 7:35 pm
Creo que has olvidado mencionar que se puede especificar cada esquina en una sola linea…
Ejemplo:
border-radius: 3px 10px 2px 10px;
Respondersaiseihogo diciembre 28, 2009 a las 7:36 pm
Otra cosa… opera si lo soporta, pero en su versión 10.5 (alpha 1)
ResponderFrancisco diciembre 29, 2009 a las 12:31 am
@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! 🙂
ResponderTepi diciembre 29, 2009 a las 3:25 am
Que lástima que Opera no lo soporte (mi navegador favorito!). Es una propiedad que ahorraría mucho trabajo a los diseñadores.
ResponderRubix diciembre 29, 2009 a las 3:05 pm
¿Internet explorer no lo soporta? ¿Cómo es posible eso?
[mode ironic = off]
Saludos!
ResponderFrancisco diciembre 29, 2009 a las 5:42 pm
@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.
ResponderJavier y German diciembre 30, 2009 a las 2:59 pm
¡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!
ResponderJavier y German.
Francisco diciembre 31, 2009 a las 12:25 am
@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 😉
ResponderMitidiero diciembre 30, 2009 a las 8:07 pm
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
ResponderFrancisco diciembre 31, 2009 a las 12:26 am
@Mitidiero Muchas gracias por el comentario. Feliz año nuevo! 🙂
ResponderReynosa Blogs enero 3, 2010 a las 12:04 am
gracias por el dato y exito 20.10 😉
ResponderFrancisco enero 5, 2010 a las 8:32 am
@Reynosa igualmente para ti, feliz año! 🙂
ResponderDomingo Lázaro enero 7, 2010 a las 1:53 pm
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
ResponderMik febrero 13, 2010 a las 7:48 am
A quien pueda interesar, estoy viendo perfectamente los bordes redondeados de los ejemplos tanto con IE8 como con Opera 10.50 Beta.
ResponderJavier y Germán febrero 13, 2010 a las 8:37 am
Hola de nuevo Francisco!
ResponderBueno, 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 😀
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!
Francisco febrero 16, 2010 a las 1:13 pm
@Javier Me alegro encontraras el problema 🙂
ResponderDriverOp marzo 9, 2010 a las 3:02 pm
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.
Respondermarcos agosto 3, 2010 a las 1:01 pm
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?
Responderexitos para todos
cesar abril 7, 2011 a las 11:56 pm
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
ResponderFrancisco abril 8, 2011 a las 10:56 pm
@cesar Con CSS, puedes ver https://blogandweb.com/imagen-de-fondo-en-tu-web-o-blog/
ResponderGonzalo septiembre 21, 2011 a las 2:34 pm
IE Apesta!
Responderlluis octubre 16, 2011 a las 6:03 am
muy interesate, muchas gracias
ResponderVíctor octubre 22, 2013 a las 12:57 am
muchas gracias, me sirvió mucho
ResponderDaniel P Z noviembre 23, 2013 a las 5:14 am
Muchas gracias por el codigo man, me recontra sirvio, pero no le puse borde, asi quedo bien igual
Gracias! 😀
Responderdgsdgsd marzo 15, 2014 a las 8:46 am
sfasf asf asf asf af
Responder