
La propiedad border-top-right-radius en CSS establece la rotación de la esquina superior derecha del elemento.
Funciones border-top-right-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-right-radius: radius */ border-top-right-radius : 3px; /* Porcentajes */ border-top-right-radius : 20%; /* La esquina será redonda si el elemento es cuadrado */ border-top-right-radius : 20% 20%; /* Igual que en la regla anterior, es decir, 20% del ancho y 20% del largo */ border-top-right-radius : 20% 10%; /* 20% del ancho y 10% del largo */ /* La esquina será una elipse */ /* border-top-right-radius: horizontal vertical */ border-top-right-radius : 0.5em 1em; /* valores globales */ border-top-right-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-right-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-right-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-right-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-right-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-right-radius: 40%; }
Observe cómo se recortará el color de fondo en el marco:
div { border-top-right-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-right-radius css
border-top-right-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
yborder-top-left-radius
. - La página de propiedades
border
y otras propiedades que establezca son:border-style
yborder-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 izquierdoborder-left
.
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS