Crear un círculo con CSS

David Galisteo Cantero

Hola! Bienvenidos a Galisteo Cantero Software!

En esta ocasión os vamos a enseñar un truco muy simple pero bastante útil, como crear un círculo con CSS.

Lo primero será preparar nuestro html con un div al que pondremos una clase “redondeado”:




	
	Document
	


	

A continuación, vamos a darle estilo al div para hacerlo redondo:

.redondeado {background: lightgrey; border-radius: 50%; height: 50px; width: 50px;}

El border-radius: 50% es el que hace la magia 🙂

De esta manera, conseguimos que un div sea redondeado, lo que nos puede servir para decorar muchos elementos de nuestra página y evitar así tener que incluir imágenes para ello, lo que dificulta nuestro desarrollo y la carga de la página.

Este mismo truco, nos servirá para cualquier etiqueta, párrafos, span… aunque, hay que tener en cuenta, que si el elemento tiene un display: inline por defecto, puede que tengamos que ponerle un display: block o display: inline-block.

Espero que os haya sido útil.

HackSaludos!

Publicado el 05-12-2016

Compartelo!

Deja un comentario

Comentanos

*
Ir arriba de la pagina