La propiedad border-radius de CSS3 permite utilizar fácilmente los bordes redondeados en nuestros diseños sin necesidad de usar varias etiquetas div e imágenes para las esquinas.
Ejemplo 1. Caja con las esquinas redondeadas en Chorme, Safari, Firefox, IE9 y superiores
El código css para conseguir los bordes redondeados del ejemplo anterior sería el siguiente:
.bordes-redondeados {
border-radius: 15px;
}
Las esquinas redondeadas se pueden conseguir de manera independiente utilizando las cuatro propiedades border-*-radius (border-top-left-radius, border-bottom-left-radius, border top-right-radius y border-bottom-right-radius) o utilizando el modo abreviado border-radius.
Ejemplo 2. Caja con las esquinas redondeadas en Chorme, Safari, Firefox, IE9 y superiores
.bordes-redondeados {
border-top-left-radius: 15px;
border-bottom-left-radius: 10px;
border-top-right-radius: 5px;
border-bottom-right-radius: 20px;
}
Todas las propiedades anteriores aceptan uno o dos valores. En el caso de que se proporcionen dos valores, cada uno se utiliza para definir el radio horizontal y vertical que sirve para pintar un cuarto de la elipse, lo que nos permite definir la curvatura.
En el ejemplo siguiente se puede ver el efecto conseguido al proporcionar el segundo valor a la propiedad.
También podemos utilizar el modo abreviado border-radius para definir los 4 esquinas al mismo tiempo.
.bordes-redondeados {
border-radius: 15px 10px 5px 20px;
}
Si queremos indicar dos valores para cada esquina podemos agregar el segundo conjunto de valores separándolo por una barra diagonal ( / ) .
.bordes-redondeados {
border-radius: 15px 10px 5px 20px / 10px 20px 15px 30px;
}
Nuestra puntuación