En este artículo, analizaremos las esquinas redondeadas mediante el uso de propiedades CSS . Cuando quitamos el borde afilado de cualquier elemento y le damos forma redonda, se le llama esquina redondeada.
Enfoque: para cambiar el borde afilado con un borde redondeado usamos la propiedad border-radius .
Ejemplo 1: En este ejemplo, nombramos la etiqueta HTML div con la clase redondeada y le aplicamos un estilo usando propiedades CSS nativas, aplicamos la propiedad border-radius para redondear las esquinas.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: green;
height: 100px;
width: 200px;
}
.rounded {
border-radius: 10px;
}
</style>
</head>
<body>
<p><b>
Before applying rounded
class to div:
</b></p>
<div></div>
<p><b>
After applying rounded
class to div:
</b></p>
<div class="rounded"></div>
</body>
</html>
Producción:
Ejemplo 2: También podemos redondear la esquina de una imagen. En los estilos de la imagen solo tenemos que pasar la misma propiedad CSS border-radius .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 10px;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="image" />
</body>
</html>
Producción:
Nota: consulte el artículo sobre la propiedad border-radius de CSS para una mejor comprensión.
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA