Propiedad CSS border-bottom-right-radius
CSS border-bottom-right-radius redondea la esquina inferior derecha de un elemento. Sintaxis, valores y ejemplos en vivo.
La propiedad CSS border-bottom-right-radius redondea únicamente la esquina inferior derecha del cuadro de borde de un elemento. Es una de las cuatro propiedades de forma larga — junto con border-top-left-radius, border-top-right-radius y border-bottom-left-radius — que el atajo border-radius agrupa. Usa la forma larga cuando quieras redondear una sola esquina y dejar el resto en ángulo recto. Forma parte de las propiedades CSS3.
Cómo funciona
La esquina se dibuja como un cuarto de elipse definido por un radio horizontal y un radio vertical:
- Un valor establece ambos radios, produciendo una esquina perfectamente circular (simétrica).
- Dos valores establecen primero el radio horizontal y luego el radio vertical, produciendo una esquina elíptica.
- Los porcentajes se resuelven en relación con el cuadro del elemento: el radio horizontal es un porcentaje del ancho, y el radio vertical es un porcentaje del alto.
Si no se establece ningún valor, el radio es 0, dejando una esquina cuadrada en ángulo recto. Un color o imagen de fondo se recorta en la esquina redondeada; puedes cambiar dónde ocurre el recorte con la propiedad background-clip.
Algunas cosas a tener en cuenta:
- Los valores negativos no son válidos — la esquina permanece en
0. - La propiedad es animable, por lo que las esquinas pueden transformarse suavemente en
:hovero mediante fotogramas clave. - El soporte en navegadores es universal en los navegadores modernos y en todas las versiones de Internet Explorer desde IE9 en adelante.
border-bottom-right-radius es una forma larga. Si el atajo border-radius se declara después de ella en la misma regla, el atajo restablece las cuatro esquinas y anula este valor. Ordena tus declaraciones en consecuencia.
| Valor inicial | 0 |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredado | No. |
| Animable | Sí. El radio de la esquina inferior derecha del borde es animable. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.borderBottomRightRadius = "15px"; |
Sintaxis
Propiedad CSS border-bottom-right-radius
border-bottom-right-radius: length | % | initial | inherit;Ejemplo de la propiedad border-bottom-right-radius:
Ejemplo de la propiedad CSS border-bottom-right-radius con un valor
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-bottom-right-radius: 35px;
}
</style>
</head>
<body>
<h2>Border-bottom-right-radius example.</h2>
<div></div>
</body>
</html>Resultado
Ejemplo de la propiedad border-bottom-right-radius con dos valores:
Ejemplo de la propiedad CSS border-bottom-right-radius con dos valores
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #eee;
border: 4px solid #666;
border-bottom-right-radius: 30px 15px;
}
</style>
</head>
<body>
<h2>Border-bottom-right-radius example.</h2>
<div></div>
</body>
</html>Ejemplo de la propiedad border-bottom-right-radius con el valor de porcentaje:
Ejemplo de la propiedad CSS border-bottom-right-radius con un valor de porcentaje
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #8ebf42;
border: 4px solid #000000;
border-bottom-right-radius: 30% 50%;
}
</style>
</head>
<body>
<h2>Border-bottom-right-radius example.</h2>
<div></div>
</body>
</html>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| length | Especifica la forma de la esquina inferior derecha en "px". | Pruébalo » |
| % | Especifica la forma de la esquina inferior derecha en porcentaje. | Pruébalo » |
| initial | Establece la propiedad en su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
Propiedades relacionadas
- border-radius — el atajo que establece las cuatro esquinas a la vez.
- border-top-left-radius, border-top-right-radius, border-bottom-left-radius — las otras tres formas largas de esquina.
- background-clip — controla cómo se recorta un fondo en las esquinas redondeadas.