Propiedad CSS border-top-right-radius
La propiedad CSS border-top-right-radius redondea la esquina superior derecha de un elemento. Aprende su sintaxis, uso con uno o dos valores y porcentajes.
La propiedad CSS border-top-right-radius redondea la esquina superior derecha del cuadro de borde de un elemento. Es una de las cuatro propiedades individuales en las que se expande la propiedad abreviada border-radius — las otras son border-top-left-radius, border-bottom-right-radius y border-bottom-left-radius. Usa esta propiedad individual cuando quieras redondear una sola esquina sin afectar las otras tres.
Esta propiedad es una de las propiedades de CSS3.
La forma del redondeo depende de los valores que le proporciones:
- Esquina cuadrada — cuando el radio es
0(el valor predeterminado), la esquina permanece afilada. - Esquina circular — cuando proporcionas un solo valor (o dos valores iguales), la esquina es un cuarto de círculo de ese radio.
- Esquina elíptica — cuando proporcionas dos valores diferentes, la esquina es un cuarto de elipse.
Si el elemento tiene una imagen de fondo o color de fondo, se recorta en el borde redondeado. El alcance del recorte está controlado por la propiedad background-clip.
La propiedad acepta los valores length, percentage, initial e inherit, y especifica los radios horizontal y vertical de la esquina superior derecha redondeada. Cuando se proporciona un valor, establece tanto el radio horizontal como el vertical (esquina circular). Con dos valores, el primero establece el radio horizontal y el segundo el radio vertical (esquina elíptica). Los porcentajes para el radio horizontal son relativos al ancho del cuadro, y los porcentajes para el radio vertical son relativos a su altura. No se permiten valores negativos.
| Valor inicial | 0 |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredado | No. |
| Animable | Sí. El borde superior derecho es animable. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.borderTopRightRadius = "25px"; |
Sintaxis
Sintaxis de la propiedad CSS border-top-right-radius
border-top-right-radius: length | % | initial | inherit;Probemos un ejemplo donde solo se usa un valor. Define tanto los radios horizontal como vertical de la elipse.
Ejemplo de la propiedad border-top-right-radius:
Ejemplo de la propiedad CSS border-top-right-radius con un solo valor
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-top-right-radius: 35px;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>Resultado
Cuando se proporcionan dos valores, el primero define el radio horizontal y el segundo el radio vertical, produciendo una esquina elíptica.
Ejemplo de la propiedad border-top-right-radius con dos valores:
Ejemplo de la propiedad CSS border-top-right-radius con dos valores
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-top-right-radius: 35px 10px;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>Ejemplo de la propiedad border-top-right-radius en porcentajes:
Ejemplo de la propiedad CSS border-top-right-radius con valor en % (porcentajes)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-top-right-radius: 60% 30%;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>Cuándo usarlo
Usa border-top-right-radius (en lugar de la propiedad abreviada border-radius) cuando solo debe redondearse la esquina superior derecha — por ejemplo, la esquina delantera de una pestaña, una burbuja de chat o una tarjeta cuyas otras esquinas deben permanecer cuadradas. Para redondear todas las esquinas a la vez, la propiedad abreviada border-radius es más concisa:
/* Round only the top-right corner */
border-top-right-radius: 12px;
/* Round all four corners at once */
border-radius: 12px;Valores
La tabla a continuación enumera los valores aceptados.
| Valor | Descripción | Pruébalo |
|---|---|---|
| length | Define la forma redondeada de la esquina superior derecha. | Pruébalo » |
| % | Define la forma redondeada de la esquina superior derecha en %. | Pruébalo » |
| initial | Establece la propiedad en su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |