Propiedad CSS border-top-right-radius
La propiedad CSS border-top-right-radius define la forma redondeada de la esquina superior derecha del elemento.
Esta propiedad es una de las propiedades CSS3.
Existen tres tipos de redondeo. Puede ser un círculo o una elipse, o el valor es 0, en cuyo caso la esquina es cuadrada. Si utiliza una imagen de fondo o un color, este se recortará en el borde. El proceso de recorte está definido por el valor de la propiedad background-clip.
La propiedad acepta valores de longitud, porcentaje, initial e inherit. La propiedad border-top-right-radius especifica los radios horizontal y vertical que definen la esquina superior derecha redondeada para un cuadro de borde. Cuando se proporciona un solo valor, este especifica tanto el radio horizontal como el vertical de la elipse. Si hay dos valores, el primero establece el radio horizontal y el segundo establece el radio vertical. Los porcentajes para el radio horizontal se refieren al ancho del cuadro, y los porcentajes para el radio vertical se refieren al alto del cuadro. No se permiten valores negativos.
| Valor inicial | 0 |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredable | 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 se utilice un solo valor. Este define tanto el radio horizontal como el 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>Cuando se proporcionan dos valores, el primero define el radio horizontal y el segundo define el radio vertical.
Resultado
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>Valores
| Valor | Descripción | Probarlo |
|---|---|---|
| length | Define la forma redondeada de la esquina superior derecha. | Probarlo » |
| % | Define la forma redondeada de la esquina superior derecha en %. | Probarlo » |
| initial | Establece la propiedad en su valor predeterminado. | Probarlo » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué hace la propiedad CSS 'border-top-right-radius'?