CSS: propiedad border-radius

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.

(Visited 21 times, 1 visits today)