La propiedad border-top-right-radius en CSS se usa para definir el radio de la esquina superior derecha del borde de un elemento determinado. El border-top-right-radius se usa para dibujar una esquina redondeada en la parte superior derecha del contenedor. El border-radius se usa para configurar todas las esquinas del radio del contenedor a la vez con el mismo valor de radio, border-top-right-radius establece específicamente el borde superior derecho.
Sintaxis:
border-top-right-radius:length|[value%]|initial|inherit;
Valor predeterminado: tiene un valor predeterminado, es decir, 0.
Valor de la propiedad: los valores de la propiedad border-top-right-radius se enumeran a continuación:
- longitud: se utiliza para especificar el radio de la esquina superior derecha en longitud fija en px, em, etc. El valor predeterminado es 0.
- porcentaje %: Se utiliza para especificar el radio de la esquina superior derecha del borde en porcentaje.
- initial: se utiliza para establecer la propiedad border-top-right-radius en su valor predeterminado.
- heredar: esta propiedad se hereda de su elemento padre.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
border-top-right-radius property
</title>
<style>
#length {
border-color: green;
border-style: solid;
border-top-right-radius: 20px;
}
#percentage {
border-color: green;
border-style: solid;
border-top-right-radius:59%;
}
#inherit {
border-color: green;
border-style: solid;
border-top-right-radius: inherit;
}
</style>
</head>
<body style = "text-align:center">
<h1>GeeksforGeeks</h1>
<h3>border-top-right-radius property</h3>
<div id="length">
border-top-right-radius: length;
</div><br>
<div id="percentage">
border-top-right-radius: percentage;
</div><br>
<div id="inherit">
border-top-right-radius: inherit;
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad border-top-right-radius se enumeran a continuación:
- Google Chrome 5.0, 4.0-webkit-
- Internet Explorer 9.0
- Firefox 4.0, 3.0-moz-
- Safari 5.0, 3.1-webkit-
- Ópera 10.5
Publicación traducida automáticamente
Artículo escrito por vishalsharmagbpec y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA