Al fin luego de mucho batallar ya dimos con la respuesta de esta interrogante que agunos usuarios de este espacio han presentado. Si tienes alguna información que compartir no dejes de compartir tu información.
los border-top-left-radius
CSS La propiedad redondea la esquina superior izquierda de un elemento especificando el radio (o el radio de los ejes semi-mayor y semi-menor) de la elipse que define la curvatura de la esquina.
El redondeo puede ser un círculo o una elipse, o si uno de los valores es 0,
no se hace ningún redondeo y la esquina es cuadrada.
Un fondo, ya sea una imagen o un color, se recorta en el borde, incluso uno redondeado; la ubicación exacta del recorte se define por el valor de la background-clip
propiedad.
Nota: Si el valor de esta propiedad no se establece en un border-radius
propiedad abreviada que se aplica al elemento después de la border-top-left-radius
CSS, el valor de esta propiedad se restablece a su valor inicial mediante la propiedad abreviada.
Sintaxis
/* the corner is a circle *//* border-top-left-radius: radius */border-top-left-radius: 3px;/* the corner is an ellipse *//* border-top-left-radius: horizontal vertical */border-top-left-radius: 0.5em 1em;border-top-left-radius: inherit;
Con un valor:
- el valor es un
o un
que denota el radio del círculo que se utilizará para el borde en esa esquina.
Con dos valores:
- el primer valor es un
o un
que denota el semieje mayor horizontal de la elipse que se utilizará para el borde en esa esquina. - el segundo valor es un
o un
que denota el semi-eje principal vertical de la elipse que se utilizará para el borde en esa esquina.
Valores
- Denota el tamaño del radio del círculo o los ejes semi-mayor y semi-menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el CSS.
tipo de datos. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.
Definicion formal
Valor inicial | 0 |
---|---|
Se aplica a | todos los elementos; pero los agentes de usuario no están obligados a postularse para table y inline-table elementos cuando border-collapse es collapse . El comportamiento de los elementos internos de la tabla no está definido por el momento. También se aplica a ::first-letter . |
Heredado | no |
Porcentajes | consulte la dimensión correspondiente del cuadro de borde |
Valor calculado | dos absolutos s o s |
Tipo de animación | una longitud, porcentaje o calc (); |
Sintaxis formal
1,2 where
= |
Ejemplos de
Ejemplos de diferentes valores de radio de borde superior izquierdo
Ejemplo vivo | Código |
---|---|
Se utiliza un arco de elipse como borde.
divborder-top-left-radius: 40px 40px; |
|
Se utiliza un arco de elipse como borde.
divborder-top-left-radius: 40px 20px; |
|
La caja es un cuadrado: un arco de círculo se usa como borde
divborder-top-left-radius: 40%; |
|
La caja no es un cuadrado: se usa un arco de elipse como borde
divborder-top-left-radius: 40%; |
|
El color de fondo está recortado en el borde.
divborder-top-left-radius:40%;border: 3px double black;background-color:rgb(250,20,70);background-clip: content-box; |
Especificaciones
Especificación | Estado | Comentario |
---|---|---|
Módulo de fondos y bordes CSS, nivel 3 La definición de ‘border-top-left-radius’ en esa especificación. |
Recomendación candidata | Definición inicial |
Compatibilidad del navegador
Ver también
border-radius
propiedad taquigráficaborder-top-right-radius
,border-bottom-right-radius
, yborder-bottom-left-radius