Bordes Redondeados CSS3 (css3 radius) – Todos los navegadores

bordes redondeados css 3Los sitios actuales de la era “web 2.0”, poseen la virtud de ser muy amigables para el usuario, desde su funcionalidad hasta el aspecto estético, todo está muy cuidado.

Visualmente, por lo general, se logra con el uso de bordes redondeados para suavizar los contornos. Esta es una técnica de diseño prácticamente indispensable en estos días.

En este CSS3 Tutorial aprenderás a realizar esta famosa técnica de Bordes Redondeados CSS.

CSS3 (la nueva versión de CSS) aporta innumerables mejoras en la manipulación de la parte visual dentro de un documento web. Y una de las mas usadas, es la propiedad que nos permite redondear los bordes de los elementos HTML.

Esta propiedad se llama “border radius”.
La misma acepta 4 valores correspondientes al radio de la curvatura de cada una de las 4 esquinas en el siguiente orden:

arriba-izq,  arriba-der, abajo-der, abajo-izq

Por ejemplo, para lograr bordes redondeados con un radio de 15 px, la sintaxis CSS completa seria para “border radius”, seria:

border-radius: 15px 15px 15px 15px;

Aquí realizaremos un ejemplo de un DIV (caja) cuyos bordes estarán redondeados.
Para ellos necesitamos crear un DIV, y luego aplicarle las propiedades de “border radius” y un color de fondo.

Primero entonces definiremos dentro de nuestro HTML, un DIV normal llamado “caja”:

<div id="caja"></div>

Luego aplicaremos al mismo, la correspondientes propiedades CSS:

#caja {
background-color: #F00;
height: 200px;
width: 200px;
padding: 10px;
/*para Firefox*/
-moz-border-radius: 15px 15px 15px 15px;
/*para Safari y Chrome*/
-webkit-border-radius: 15px 15px 15px 15px;
/* para Opera */
border-radius: 15px 15px 15px 15px;
}

Aplicamos aquí un color de fondo rojo (#F00), un alto de 200px, un ancho de 200px, y unos bordes redondeados de 15 px de radio en cada esquina.

Como puedes ver, antes de “border radius” he colocado un prefijo “-moz”, y otro “-webkit”.

Estos prefijo sirven para que “border radius” sea compatible con Firefox (-moz), y con Chrome y Safari (-webkit). Para el navegador Opera, no hace falta ningún prefijo.

Como seguramente ya te estarás dando cuenta, CSS3 es extremadamente potente y tiene una sintaxis muy simple que nos permite realizar efectos muy atractivos.

Y…..Internet Explorer…..

Ahora bien, te preguntarás que sucede con Internet Explorer…..
Como seguramente ya estará adivinando, esta propiedad no es compatible con este navegador, pero siempre hay una solución!

Para IE debemos utilizar una solución un tanto más compleja, que incluye algo de JavaScript.

Aquí la solución:

Descárgate el archivo “border.htc”, que esta comprimido en un ZIP en el siguiente enlace:

> Descargar archivo border.htc <

Descomprímelo en el mismo directorio donde están tus archivos HTML.
Y por último a las propiedades CSS que creamos arriba, debes agregarle:

behavior:url(border.htc);

Por lo tanto, las propiedades completas de CSS para bordes redondeados deben quedarte de la siguiente forma:

#caja {
background-color: #F00;
height: 200px;
width: 200px;
padding: 10px;
/*para Firefox*/
-moz-border-radius: 15px 15px 15px 15px;
/*para Safari y Chrome*/
-webkit-border-radius: 15px 15px 15px 15px;
/* para Opera */
border-radius: 15px 15px 15px 15px;
/* para IE */
behavior:url(border.htc);
}

Aqui puedes ver y descargar el ejemplo completo:

 

 

El poder y la flexibilidad que posee CSS3 dentro del diseño web, es algo que nunca antes se había logrado con ningún lenguaje de programación web.

Es por eso que siempre digo que CSS3 es el Futuro del Diseño Web.

Te invito a que veas el Video-Tutorial CSS3, que preparé, donde aprenderás el gran potencial que tiene esta nueva versión de CSS.

>>>>>> Haz click AQUÍ para ingresar al Video-Tutorial CSS3 <<<<<<<

CSS3 Tutorial - Video Tutorial CSS3 gratuito

Saludos!
Cristian

13 pensamientos en “Bordes Redondeados CSS3 (css3 radius) – Todos los navegadores

  1. Joseph

    Hola Cristian
    Acabo de ver este tuto y esta muy bueno, me sirvio mucho

    Una consulta, como se puede lograr la sombra para IE ? me podrias decir ?

    GRacias

    Responder
    1. Cristian - Experto en CSS3 Autor

      Hola juan
      Yo en IE10 lo veo perfecto.
      Recorda que las versiones antiguas de IE no son muy compatibles con CSS3.

      Saludos
      Cristian

      Responder

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>