Propiedad CSS border-bottom-right-radius
La propiedad CSS border-bottom-right-radius se utiliza para establecer el redondeo de la esquina inferior derecha del elemento.
La propiedad border-bottom-right-radius es una de las propiedades CSS3.
La propiedad border-bottom-right-radius especifica los radios horizontal y vertical que definen la esquina inferior derecha redondeada para un cuadro de borde. Esta propiedad se especifica mediante dos valores: longitud y porcentajes. Tenga en cuenta que los valores porcentuales se calculan en relación con el ancho del elemento.
Cuando se proporciona un solo valor, especifica tanto el radio horizontal como el vertical de la elipse. Si se proporcionan dos valores, el primero establece el radio horizontal y el segundo establece el radio vertical. Si no se define ningún valor, el radio predeterminado es 0px, lo que da como resultado una esquina cuadrada. Si se utiliza una imagen o color de fondo, este se recortará en el borde. El proceso de recorte está definido por el valor de la propiedad background-clip.
INFO
Si se aplica la propiedad abreviada border-radius después de border-bottom-right-radius, anulará el valor de la propiedad larga.
| Valor inicial | 0 |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredado | No. |
| Animable | Sí. El radio del borde inferior derecho 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 "porcentaje":
Ejemplo de la propiedad CSS border-bottom-right-radius con un valor porcentual
<!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 | Probar |
|---|---|---|
| length | Especifica el formato de la esquina inferior derecha en "px". | Probar » |
| % | Especifica el formato de la esquina inferior derecha en porcentaje. | Probar » |
| initial | Establece la propiedad en su valor predeterminado. | Probar » |
| inherit | Hereda la propiedad de su elemento principal. |
Práctica
¿Cuáles de las siguientes afirmaciones sobre la propiedad CSS border-bottom-right-radius son verdaderas?