
La propiedad border-bottom-right-radius en CSS establece la rotación de la esquina inferior derecha del elemento.
Funciones border-bottom-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-bottom-right-radius: radius */ border-bottom-right-radius : 3px ; /* Porcentajes */ border-bottom-right-radius : 20%; /* La esquina será redonda si el elemento es cuadrado */ border-bottom-right-radius : 20% 20%; /* Igual que en la regla anterior, es decir, 20% del ancho y 20% del largo */ border-bottom-right-radius : 20% 10%; /* 20% del ancho y 10% del largo */ /* La esquina será una elipse */ /* border-bottom-right-radius: horizontal vertical */ border-bottom-right-radius: 0.5em 1em; /* valores globales */ border-bottom-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-bottom-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-bottom-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-bottom-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-bottom-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-bottom-right-radius: 40%; }
Observe cómo se recortará el color de fondo en el marco:
div { border-bottom-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 general
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-bottom-right-radius css
border-bottom-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-left-radius
,border-top-left-radius
yborder-top-right-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
.
- Característica Box Sizing en CSS
- Característica del Margin en CSS
- Diferencias entre SASS y SCSS
- Característica del Padding en CSS
- Característica de Opacity en CSS
- Característica del Overflow en CSS
- Característica del Color en el CSS
- Característica del Background en CSS
- Característica de Border en CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Características padding en CSS
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Propiedad clear en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Propiedades float en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica background-position en CSS
- Característica box-shadow en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Características border-image-width en CSS
- Características border-left en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Características border-right-color en CSS