Con la ayuda de la propiedad border-top-left-radius podemos redondear la esquina superior izquierda de la forma. La propiedad border-top-left-radius se emplea alrededor de la esquina superior izquierda de una parte.
La propiedad toma uno o 2 valores que delimitan los radios del óvalo de 1/4 que define la forma de la esquina del borde del borde exterior (ver el diagrama a continuación). El valor principal es el radio horizontal, el segundo el radio vertical. Si se omite el segundo valor, se rastrea desde el principal. Si cualquiera de las longitudes es cero, la esquina es cuadrada, no redondeada.
Sintaxis:
border-top-left-radius: length / % / initial / inherit;
Los porcentajes para el radio horizontal se sientan con la dimensión del cuadro de borde, mientras que los porcentajes para el radio vertical se sientan con la altura del cuadro de borde y no se permiten valores negativos como valor de esta propiedad.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.gfg {
border: 5px solid green;
width:60%;
text-align:center;
height:400px;
border-top-left-radius: 50%;
background: url(
https://media.geeksforgeeks.org/wp-content/uploads/20190405121202/GfGLH.png);
}
</style>
</head>
<body>
<div class="gfg"></div>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#GFG{
border: 5px solid green;
width:60%;
text-align:center;
height:400px;
border-top-left-radius: 50%;
}
</style>
</head>
<body>
<h2>border-top-left-radius: 50%:</h2>
<div id="GFG">
<p style="margin-top:200px;">
It is employed around the high left
corner of a part.
</p>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por KrishnaKripa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA