Día 81: CSS Rounded Corners
La ruta del desarrollador web frontend autónomo🤹♂️
Con la propiedad CSS
border-radius, puede dar a cualquier elemento "esquinas redondeadas".
La propiedad border-radius
La propiedad CSS border-radius define el radio de las esquinas de un elemento.
Tip: Esta propiedad le permite agregar esquinas redondeadas a los elementos.
Aquí hay tres ejemplos:
Esquinas redondeadas para un elemento con un color de fondo específico:
Esquinas redondeadas para un elemento con borde:
Esquinas redondeadas para un elemento con una imagen de fondo:
Aquí está el código:
Ejemplo:
Tip: La propiedad
border-radiuses en realidad una propiedad abreviada para las propiedadesborder-top-left-radius,border-top-right-radius,border-bottom-right-radiusyborder-bottom-left-radius.
border-radius - especifica cada esquina
La propiedad border-radius puede tener de uno a cuatro valores. Estas son las reglas:
Cuatro valores - border-radius: 15px 50px 30px 5px; (el primer valor se aplica a la esquina superior izquierda, el segundo valor se aplica a la esquina superior derecha, el tercer valor se aplica a la esquina inferior derecha y el cuarto valor se aplica a la esquina inferior izquierda):
Tres valores - border-radius: 50px 30px 5px; (el primer valor se aplica a la esquina superior izquierda, el segundo valor se aplica a las esquinas superior derecha e inferior izquierda y el tercer valor se aplica a la esquina inferior derecha):
Dos valores - border-radius: 30px 5px; (el primer valor se aplica a las esquinas superior izquierda e inferior derecha, y el segundo valor se aplica a las esquinas superior derecha e inferior izquierda):
Un valor - border-radius: 15px; (el valor se aplica a las cuatro esquinas, que se redondean por igual)
Aquí está el código:
Ejemplo:
También puedes crear esquinas elípticas:
Ejemplo:
Todas las propiedades border-radius
| Propiedad | Descripción |
border-radius | Una propiedad abreviada para establecer las cuatro propiedades border-radius. |
border-top-left-radius | Define la forma del borde de la esquina superior izquierda. |
border-top-right-radius | Define la forma del borde de la esquina superior derecha. |
border-bottom-right-radius | Define la forma del borde de la esquina inferior derecha. |
border-bottom-left-radius | Define la forma del borde de la esquina inferior izquierda. |
Resumen
La propiedad CSS border-radius permite agregar esquinas redondeadas a los elementos. Puede tener de uno a cuatro valores para especificar cada esquina, y también se pueden crear esquinas elípticas. La propiedad es una abreviatura para las propiedades border-top-left-radius, border-top-right-radius, border-bottom-right-radius y border-bottom-left-radius.
Traducido con 💚 desde W3Schools.com