border-bottom-right-radius

Resumen

La propiedad CSS border-bottom-right-radius establece el redondeo de la esquina inferior derecha del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es 0, no se redondeará la esquina, dejándola cuadrada.

border-bottom-right-radius.png

Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad background-clip.

Si el valor de esta propiedad no se establece en una propiedad reducida border-radius (en-US) que es aplicada al elemento después de la propiedad border-bottom-right-radius, el valor de esta propiedad es restaurado a su valor inicial por la propiedad de forma reducida.

Valor inicial0
Applies toall elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter.
Heredableno
Percentagesrefer to the corresponding dimension of the border box
Valor calculadotwo absolute lengths or percentages
Animation typea length, percentage or calc();

Sintaxis

/* la esquina es un círculo */
/* border-bottom-right-radius: radius */
border-bottom-right-radius: 3px;

/* la esquina es una elipse */
/* border-bottom-right-radius: horizontal vertical */
border-bottom-right-radius: 0.5em 1em;

border-bottom-right-radius: inherit;

donde:

radius
Es un valor <length> o <percentage> que denota el radio del círculo que se usará para el borde en esa esquina.
horizontal
Es un valor <length><percentage> que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
vertical
Es un valor <length><percentage> que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.

Valores

<length>
Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS <length>. Los valores negativos no son válidos.
<percentage>
Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.

Sintaxis formal

Ejemplos

Ejemplo en vivo Código
Un arco de círculo usado como borde
div {
  border-bottom-right-radius: 40px 40px;
}
Un arco de elipse usado como borde
div {
  border-bottom-right-radius: 40px 20px;
}
La caja es un cuadro: un arco de círculo es usado como borde
div {
  border-bottom-right-radius: 40%;
}
La caja no es un círculo: un arco de elipse es usado como borde
div {
  border-bottom-right-radius: 40%;
}
El color de fondo está delimitado al borde
div {
  border-bottom-right-radius:40%;
  border-style: black 3px double;
  background-color: rgb(250,20,70);
  background-clip: content-box;
}

Especificaciones

Especificación Estado Comentarios
CSS Backgrounds and Borders Module Level 3
La definición de 'border-bottom-right-radius' en esta especificación.
Candidate Recommendation Definición inicial

Compatibilidad de navegadores

BCD tables only load in the browser

Véase también

Las propiedades CSS relacionadas con radio de borde: la forma reducida border-radius (en-US), las propiedades de las otras esquinas: border-top-right-radius, border-top-left-radius, y border-bottom-left-radius.