Con unas sencillas lineas de CSS podemos dar a nuestro sitio un notable cambio estético utilizando bordes redondeados en nuestras cajas e imágenes, así como haciéndolas completamente circulares.
Para lograr estos efectos usaremos la propiedad border-radius de CSS3 la cual admite entre 1 y 4 parámetros en los cuales podemos indicar con pixels o porcentajes cuanto queremos redondear cada esquina o un grupo de ellas.
También pueden usarse las propiedades para cada esquina independientemente: border-top-left-radius, border-top-right-radius, border-bottom-right-radius y border-bottom-left-radius.
Uso de los parámetros:
-
- 1 parámetro: Todas las esquinas son redondeadas por igual.
- 2 parámetros: El primer valor se aplica a las esquinas superior izquierda e inferior derecha y el segundo a las restantes.
- 3 parámetros: El primer valor se aplica a la esquina superior izquierda, el segundo a la superior derecha y la inferior izquierda y el tercero a la inferior derecha.
- 4 parámetros: Se aplican a cada una de las esquinas comenzando desde la superior izquierda y continuando en sentido horario.
Ejemplos:
Circular:
.circular {
border-radius: 50%;
}
Redondeado:
.redondeado {
border-radius: 4px;
}
Customizado:
.customizado {
border-radius: 14px 6px 10px 2px;
}
Cabe agregar que, border-radius, es una propiedad que adminite animaciones, por lo que podemos generar diferentes efectos cambiando sus valores mediante eventos.