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.