En este artículo, aprenderemos cómo diseñar una esquina usando la propiedad CSS3. Puede lograr esta tarea mediante el uso de propiedades border-radius .
La propiedad border-radius en CSS se usa para redondear las esquinas de los bordes exteriores de un elemento. Esta propiedad puede contener uno, dos, tres o cuatro valores. La propiedad border-radius se utiliza para establecer el radio del borde. Esta propiedad no se aplica a los elementos de la tabla cuando el borde se contrae.
Sintaxis:
border-radius: value;
Ejemplo 1: este ejemplo ilustra la propiedad border-radius cuyo valor se especifica mediante un único valor.
HTML
<!DOCTYPE html>
<html>
<head>
<title>How can you create CSS3 property
for each corner?</title>
<style>
.GFG {
border-radius: 20px 50px ;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3><br><br>
<div class="GFG">
<h2>GfG</h2>
</div>
</center>
</body>
</html>
Producción:
Ejemplo 2: en el siguiente código, aprenderemos cómo puede crear una propiedad CSS3 para cada esquina.
HTML
<!DOCTYPE html>
<html>
<head>
<title>How can you create CSS3
property for each corner?</title>
<style>
.GFG {
border-radius: 20px 50px 90px 140px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3><br><br>
<div class="GFG">
<h2>GfG</h2>
</div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA