En este artículo, crearemos una imagen redondeada con CSS. Se puede hacer usando la propiedad border-radius de CSS . Esta propiedad se utiliza principalmente para hacer formas redondas. Contiene un valor numérico en forma de píxeles.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 58%;
}
</style>
</head>
<body>
<h2>GeeksForGeeks</h2>
<h2>
How to create a Circular/
Rounded images using CSS?
</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo"
width="200" height="160"
border="5">
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 38%;
}
</style>
</head>
<body>
<h2>GeeksForGeeks</h2>
<h2>
How to create a Circular/
Rounded images using CSS?
</h2>
<img src="img_avatar.png"
alt="GeeksforGeeks logo"
width="200" height="160"
border="5">
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA