los border-bottom-right-radiusCSS La propiedad redondea la esquina inferior derecha 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.

border-bottom-right-radius.png

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-bottom-right-radius CSS, el valor de esta propiedad se restablece a su valor inicial mediante la propiedad abreviada.

Sintaxis

/* The corner is a circle *//* border-bottom-right-radius: radius */border-bottom-right-radius: 3px;/* Percentage values */border-bottom-right-radius: 20%;/* corner of a circle if box is a square or else corner of a rectangle */border-bottom-right-radius: 20% 20%;/* same as above *//* 20% of horizontal(width) and vertical(height) */border-bottom-right-radius: 20% 10%;/* 20% of horizontal(width) and 10% of vertical(height) *//*The corner is an ellipse *//* border-bottom-right-radius: horizontal vertical */border-bottom-right-radius: 0.5em 1em;border-bottom-right-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 inferior derecho

Ejemplo vivo Código
. Se utiliza un arco de círculo como borde. 

divborder-bottom-right-radius: 40px 40px;
. Se utiliza un arco de elipse como borde. 

divborder-bottom-right-radius: 40px 20px;
. La caja es un cuadrado: un arco de círculo se usa como borde 

divborder-bottom-right-radius: 40%;
. La caja no es un cuadrado: se usa un arco de elipse como borde 

divborder-bottom-right-radius: 40%;
. El color de fondo está recortado en el borde. 

divborder-bottom-right-radius:40%;border-style: black 3px double;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-bottom-right-radius’ en esa especificación.
Recomendación candidata Definición inicial

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
border-bottom-right-radius 41 1212 4Antes de Firefox 50, los estilos de borde de las esquinas redondeadas siempre se representaban como si border-style era sólido. Esto se ha solucionado en Firefox 50.49441-12 9 10.515 53 ≤37≤37 1818 4Antes de Firefox 50, los estilos de borde de las esquinas redondeadas siempre se representaban como si border-style era sólido. Esto se ha solucionado en Firefox 50.49444-14 1114 4.21 1.01.0
elliptical_corners 1 12 3,5 9 10,5 3 ≤37 18 4 14 1 1.0
percentages 4 12 41Antes de Firefox 4, el era relativo al ancho de la caja incluso al especificar el radio para una altura. Esto implicaba que -moz-border-radius-bottomright siempre estaba dibujando un arco de círculo, y nunca una elipse, cuando estaba seguido de un solo valor. 9 10,5 5 ≤37 18 4 14 4.2 1.0

Ver también

  • border-radius propiedad taquigráfica
  • border-top-right-radius, border-bottom-left-radius, y border-top-left-radius