Características border-top-left-radius en CSS

La propiedad border-top-left-radius en CSS establece la rotación de la esquina superior izquierda del elemento.

Funciones border-top-left-radius css

Valor inicial	`0`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	Sí
Porcentajes	Un porcentaje de la dimensión correspondiente al valor del marco del elemento.
Valor calculado	Dos valores de longitud <length> o dos porcentajes `<percentage>`.

/* la esquina será redonda */ 
/* border-top-left-radius: radius */ 
border-top-left-radius :  3px;
/* Porcentajes */ 
border-top-left-radius :  20%;  /* La esquina será redonda si el elemento es cuadrado */ 
border-top-left-radius :  20%  20%;  /* Igual que en la regla anterior, es decir, 20% del ancho y 20% del largo */ 
border-top-left-radius :  20%  10%;  /* 20% del ancho y 10% del largo */
/* La esquina será una elipse */ 
/* border-top-left-radius: horizontal vertical */ 
border-top-left-radius :  0.5em  1em ;
/* valores globales */ 
border-top-left-radius: inherit;

La esquina puede ser redonda o puede ser elipse según el valor asignado a esta propiedad, y si el valor es igual 0, la esquina no se redondea. El fondo (ya sea una imagen o un color) se recortará en el marco (incluso si se gira), pero la ubicación exacta del recorte estará definida por el valor de la propiedad background-clip.

Nota: Si el valor de esta propiedad no se establece mediante el acceso directo border-radius que se estableció después de usar la propiedad border-top-left-radius, esta propiedad se restablecerá a su valor inicial debido a que se está utilizando la propiedad corta.

Ejemplos y aplicaciones en código

Se utilizará un arco de círculo (radio de 40 píxeles) como esquina para el elemento:

div {
  border-top-left-radius: 40px 40px;
}

Un arco de una elipse (radio mayor [horizontal] 40px y secundario [vertical] 20px) se usará como una esquina del elemento:

div {
  border-top-left-radius: 40px 20px;
}

Usando un porcentaje con un elemento cuadrado, resultando en el arco de un círculo que se usa como su esquina:

div {
  border-top-left-radius: 40%;
}

Usar un porcentaje con un elemento que no es cuadrado, da como resultado que el arco de una elipse se use como su esquina:

div {
  border-top-left-radius: 40%;
}

Observe cómo se recortará el color de fondo en el marco:

div {
  border-top-left-radius:40%;
  border-style: black 3px double;
  background-color: rgb(250,20,70);
  background-clip: content-box;
  height: 200px;
  width: 200px;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	5	4	9	11,5	5

Características generales

Si especificamos un valor:

Este valor es una longitud <length> o un porcentaje que <percentage> indica el radio del círculo utilizado para rotar la esquina del neumático.

Si especificamos dos valores:

El primer valor es una longitud <length> o un porcentaje que <percentage> indica el radio principal (horizontal) de la elipse utilizada para rotar la esquina del marco.
El segundo valor es una longitud <length> o un porcentaje que <percentage> indica el radio secundario (vertical) de la elipse utilizada para rotar la esquina del neumático.

<length> o <percentage>

Determine la longitud del radio del círculo o los radios de los radios mayor y menor en la elipse, y se pueden usar longitudes absolutas según lo permita el tipo de datos <length>.

Tenga en cuenta que los porcentajes del diámetro mayor (horizontal) son relativos al ancho de la caja del objeto, y los porcentajes del diámetro menor (vertical) son relativos a la altura de la caja del objeto. No se pueden utilizar valores negativos.

Estructura border-top-left-radius css

border-top-left-radius: <length-percentage>{1,2};

dónde:

<length-percentage> = <length> | <percentage>

Consulte también

Las esquinas redondeadas border-radius y otras propiedades que se configuran son: border-bottom-right-radius, border-bottom-left-radius y border-top-right-radius
La página de propiedades border y otras propiedades que establezca son: border-style y border-color.
La página de propiedades que establece partes del marco: marco superior border-top, border-bottom marco inferior, border-right marco derecho y marco izquierdo border-left.