Crear bordes redondos con CSS3 (border-radius)

CSS3

Desde que apareció la versión 3 de CSS, más concretamente CSS3 el utilizar imágenes para  realizar esquinas redondeadas es historia.

CSS3 incorpora una propiedad extendida de border llamada border-radius la cual es soportada en todos los navegadores modernos como pueden ser Internet Explorer 9 +, Google Chrome, Mozilla Firefox, Opera y Safari.

Voy a mostraros la forma de utilizar border-radius poniendo un ejemplo:

div
{
border:2px solid;
border-radius:25px;
}

 

El resultado seria este.

 

Con border-radius también es posible generar cada una de las esquinas con un borde diferente, os pongo un ejemplo:

div
{
border:2px solid;
border-top-left-radius:25px;
border-top-right-radius:0px;
border-bottom-right-radius:25px;
border-bottom-left-radius:0px;
}

 

El resultado seria este.

 

Como veis su uso es muy fácil y de esta forma no tendremos que sobrecargar nuestra web con la carga de imágenes en el estilo.

Bueno queda mencionar que es recomendable usar las variantes de Webkit y Gecko al usar esta propiedad para tener compatibilidad para los navegadores modernos que no estén actualizados.

Es muy facil de usar, simplemente hay que crear una linea más poniendo delante de border-radius -webkit- y otra con -moz-

Os pongo un ejemplo:

div
{
border:2px solid;
border-radius:25px;
-webkit-border-radius:25px;
-moz-border-radius:25px;
}

De esta forma funcionará al 100% en todos los navegadores modernos.

Bueno espero que os sirva y si tenéis alguna duda podéis preguntármelo en los comentarios.

Un saludo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Notificación de comentarios

Si se suscribirse cuando se publique un nuevo comentario se le notificará por correo electrónico, de esta forma podrá estar informado de todos los comentarios y podrá ver si han respondido al suyo.

También puedes suscribirte sin comentar.