Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedad border-radius
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada radio del borde Con sintaxis y ejemplos.
describir
La propiedad CSS border-radius define las esquinas redondeadas en los bordes de las cajas.
sintaxis
La propiedad border-radius de CSS se puede representar mediante uno, dos, tres o cuatro de los valores proporcionados, seguidos de una barra inclinada opcional (/) y un segundo conjunto de valores.
sintaxis – un valor
Sintaxis de CSS Propiedad Radio límite (con 1 valor) es:
border-radius: all [ / all];Cuando se proporciona un valor, el valor del radio del borde se aplicará a las cuatro esquinas del cuadro (es decir, arriba a la izquierda, arriba a la derecha, abajo a la derecha, abajo a la izquierda).
Si se proporciona una barra inclinada (/) y otro conjunto de valores de radio de borde, el primer conjunto de valores de radio se aplica a radios horizontales y el segundo conjunto de valores a radios verticales. Si se omiten la barra oblicua y el segundo conjunto de valores, se aplicarán los mismos valores a los radios horizontal y vertical.
Sintaxis – dos valores
Sintaxis de CSS Propiedad Radio límite (con 2 valores) es:
border-radius: top-left&bottom-right top-right&bottom-left
[ / top-left&bottom-right top-right&bottom-left];Cuando se proporcionan dos valores, el primer valor se aplicará a las esquinas superior izquierda e inferior derecha del cuadro. El segundo valor se aplicará a las esquinas superior derecha e inferior izquierda del cuadro.
Si se proporciona una barra inclinada (/) y otro conjunto de valores de radio de borde, el primer conjunto de valores de radio se aplica a radios horizontales y el segundo conjunto de valores a radios verticales. Si se omiten la barra oblicua y el segundo conjunto de valores, se aplicarán los mismos valores a los radios horizontal y vertical.
Sintaxis – tres valores
Sintaxis de CSS Propiedad Radio límite (con 3 valores) es:
border-radius: top-left top-right&bottom-left bottom-right
[ / top-left top-right&bottom-left bottom-right];Cuando se proporcionen tres valores, el primer valor se aplicará a la esquina superior izquierda del cuadro. El segundo valor se aplicará a las esquinas superior derecha e inferior izquierda del cuadro. El tercer valor se aplicará a la esquina inferior derecha del cuadro.
Si se proporciona una barra inclinada (/) y otro conjunto de valores de radio de borde, el primer conjunto de valores de radio se aplica a radios horizontales y el segundo conjunto de valores a radios verticales. Si se omiten la barra oblicua y el segundo conjunto de valores, se aplicarán los mismos valores a los radios horizontal y vertical.
Sintaxis: cuatro valores
Sintaxis de CSS Propiedad Radio límite (con 4 valores) es:
border-radius: top-left top-right bottom-right bottom-left
[ / top-left top-right bottom-right bottom-left];Cuando se proporcionan cuatro valores, el primer valor se aplicará a la esquina superior izquierda del cuadro. El segundo valor se aplicará a la esquina superior derecha del cuadro. El tercer valor se aplicará a la esquina inferior derecha del cuadro. El cuarto valor se aplicará a la esquina inferior izquierda del cuadro.
Si se proporciona una barra inclinada (/) y otro conjunto de valores de radio de borde, el primer conjunto de valores de radio se aplica a radios horizontales y el segundo conjunto de valores a radios verticales. Si se omiten la barra oblicua y el segundo conjunto de valores, se aplicarán los mismos valores a los radios horizontal y vertical.
Los valores superior izquierdo, superior derecho, inferior derecho e inferior izquierdo pueden ser uno de los siguientes:
| valor | describir |
|---|---|
| estable | valor fijo en px, em, … div {borde-radio: 4px;} div {borde-radio: 4px / 6px} |
| porcentaje | valor porcentual div { borde-radio: 8%; } div { borde-radio: 8% / 6%; } |
| heredar | El elemento heredará el radio del borde de su elemento principal. div {borde-radio: heredar;} |
notas
- En la propiedad CSS border-radius, puede combinar diferentes valores de border-radius para las esquinas superior izquierda, superior derecha, inferior derecha e inferior izquierda del cuadro.
- Si se proporciona una barra inclinada (/) y otro conjunto de valores de radio de borde, el primer conjunto de valores de radio se aplica a radios horizontales y el segundo conjunto de valores a radios verticales. Si se omiten la barra oblicua y el segundo conjunto de valores, se aplicarán los mismos valores a los radios horizontal y vertical.
Compatibilidad del navegador
La propiedad border-radius de CSS tiene soporte básico para los siguientes navegadores:
- cromo 4
- Firefox 4+ (Geco 2+)
- Internet Explorer 9+ (IE 9+)
- Ópera 10.5+
- Safari 5+ (WebKit 3+)
ejemplo
Analizaremos la propiedad border-radius a continuación, explorando ejemplos de cómo usar esta propiedad con un valor de 1, 2, 3 o 4 en CSS.
un valor en la colección
Veamos un ejemplo de radio de borde CSS donde proporcionamos un valor en un conjunto.
div { border-radius: 2px; }En este ejemplo de radio de borde CSS, proporcionamos un valor de 2px, que se aplicará a las 4 esquinas del cuadro, incluidos los radios horizontal y vertical.
A continuación, veremos un ejemplo de radio de borde CSS, donde establecemos un valor para el radio horizontal y un valor para el radio vertical.
div { border-radius: 2px / 3px; }En este ejemplo de radio de borde CSS, proporcionamos un valor de 2px, que se aplicará al radio horizontal de las 4 esquinas del cuadro. Se aplicará un valor de 3px al radio vertical de las 4 esquinas del cuadro.
dos valores en una colección
Veamos un ejemplo de radio de borde CSS donde proporcionamos dos valores en una colección.
div { border-radius: 2px 3px; }En este ejemplo de CSS border-radius, proporcionamos un valor de 2px, que se aplicará a las esquinas superior izquierda e inferior derecha del cuadro, incluidos los radios horizontal y vertical. El segundo valor, 3px, se aplicará a las esquinas superior derecha e inferior izquierda del cuadro, incluidos los radios horizontal y vertical.
A continuación, veremos un ejemplo de radio de borde CSS en el que proporcionamos dos valores para el radio horizontal en un conjunto y dos valores para el radio vertical en un conjunto.
div { border-radius: 2px 3px / 5px 4px; }En este ejemplo de radio de borde CSS, proporcionamos un valor de 2px, que se aplicará a las esquinas superior izquierda e inferior derecha del cuadro de radio horizontal. El segundo valor de 3px se aplicará a las esquinas superior derecha e inferior izquierda del cuadro de radio horizontal. Se aplicará un tercer valor de 5px a las esquinas superior izquierda e inferior derecha del cuadro de radio vertical. Se aplicará un cuarto valor de 4px a las esquinas superior derecha e inferior izquierda del cuadro de radio vertical.
tres valores en el conjunto
Veamos un ejemplo de radio de borde CSS donde proporcionamos tres valores en un conjunto.
div { border-radius: 1px 2px 3px };En este ejemplo de radio de borde de CSS, proporcionamos un valor de 1 px que se aplicará a la esquina superior izquierda del cuadro, incluidos los radios horizontal y vertical. El segundo valor, 2px, se aplicará a las esquinas superior derecha e inferior izquierda del cuadro, incluidos los radios horizontal y vertical. Se aplicará un tercer valor de 3px a la esquina inferior derecha del cuadro, radios horizontales y verticales.
A continuación, veremos un ejemplo de radio de borde CSS en el que proporcionamos tres valores para el radio horizontal en un conjunto y tres valores para el radio vertical en un conjunto.
div { border-radius: 1px 2px 3px / 6px 5px 4px; }En este ejemplo de radio de borde de CSS, proporcionamos un valor de 1 px, que se aplicará a la esquina superior izquierda del cuadro de radio horizontal. El segundo valor de 2px se aplicará a las esquinas superior derecha e inferior izquierda del cuadro de radio horizontal. Se aplicará un tercer valor de 3px a la esquina inferior derecha del cuadro de radio horizontal.
Se aplicará un cuarto valor de 6px a la esquina superior izquierda del cuadro de radio vertical. Se aplicará un quinto valor de 5 px a las esquinas superior derecha e inferior izquierda del cuadro de radio vertical. Se aplicará un sexto valor de 4px a la esquina inferior derecha del cuadro de radio vertical.
cuatro valores en el conjunto
Veamos un ejemplo de radio de borde CSS donde proporcionamos cuatro valores en un conjunto.
div { border-radius: 1px 2px 3px 4px; }En este ejemplo de radio de borde de CSS, proporcionamos un valor de 1 px que se aplicará a la esquina superior izquierda del cuadro, incluidos los radios horizontal y vertical. El segundo valor de 2px se aplicará a la esquina superior derecha de la caja, radios horizontales y verticales. Se aplicará un tercer valor de 3px a la esquina inferior derecha del cuadro, radios horizontales y verticales. Se aplicará un cuarto valor de 4px a la esquina inferior izquierda del cuadro, radios horizontales y verticales.
A continuación, veremos un ejemplo de radio de borde CSS, donde proporcionamos un valor para el radio horizontal y un valor para el radio vertical.
div { border-radius: 1px 2px 3px 4px / 8px 7px 6px 5px; }En este ejemplo de radio de borde de CSS, proporcionamos un valor de 1 px, que se aplicará a la esquina superior izquierda del cuadro de radio horizontal. El segundo valor de 2px se aplicará a la esquina superior derecha del cuadro de radio horizontal. Se aplicará un tercer valor de 3px a la esquina inferior derecha del cuadro de radio horizontal. Se aplicará un cuarto valor de 4px a la esquina inferior izquierda del cuadro de radio horizontal.
Se aplicará un quinto valor de 8px a la esquina superior izquierda del cuadro de radio vertical. Se aplicará un sexto valor de 7px a la esquina superior derecha del cuadro de radio vertical. Se aplicará un séptimo valor de 6px a la esquina inferior derecha del cuadro de radio vertical. El octavo valor de 5px se aplicará a la esquina inferior izquierda del cuadro de radio vertical.