CSS

Imagen circular con CSS

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="http://programacionextrema.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:

Imagen circular con CSS

Imagen circular con CSS

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.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *