Blog
Anteriormente hemos visto cómo crear bordes redondeados en CSS, hoy aprenderemos a crear una imagen circular con CSS. Para realizar esta tarea vamos a utilizar la propiedad border-radius.
¿Cómo crear una imagen circular con CSS?
Para realizar esto vamos a necesitar una imagen de prueba, en nuestro caso vamos a utilizar la imagen de CSS de nuestro tutorial y le vamos aplicar la propiedad border-radius con 100px:
<!DOCTYPE html>
<html>
<head>
<title>Imagen circular con CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.circulo{
width: 200px;
height: 200px;
border-radius: 100px;
}
</style>
</head>
<body>
<img src="https://unipython.com/wp-content/uploads/2015/11/css.jpg" class="circulo">
</body>
</html>
Para que las imágenes no se desformen es recomendable que sean cuadradas y no rectangulares. Como en nuestro caso la imagen es rectangular le establecimos 200px de ancho y alto con CSS.
El resultado de visualizar la página anterior sería el siguiente:
Bueno gente hemos llegado al final de este breve tutorial en el cual se explica cómo crear una imagen circular con CSS, espero que les sea de gran utilidad y ante cualquier inconveniente no duden en dejar un comentario.
Enserio neta, gracias!