En este tutorial básico, aprenderemos cómo hacer un círculo con HTML y CSS. El círculo es una de las formas más sencillas para crear, dado que vamos a partir de un simple cuadrado. Así que sigue leyendo para aprender paso a paso.

1. Crear un elemento con HTML
Crear un círculo con HTML y CSS es muy sencillo. Lo primero es crear un elemento en HTML. En este ejemplo, usaremos un <div>
.
<div class="circulo></div>
Como puedes ver, hemos creado un elemento con la clase círculo. Esto nos permitirá usar CSS para personalizar este elemento.
2. Definir el tamaño y color del círculo con CSS
Ahora con CSS, vamos a definir el tamaño y el color de nuestro círculo. Usamos la propiedad background-color
para definir el color de fondo, y usamos las propieades width
y height
para definir el ancho y altura de nuestro elemento.
Aquí puede elegir el color que desees para tu círculo, pero lo importante es que la altura y el ancho sean iguales.
.circulo{ background-color: blue; width: 100px; height: 100px; }
Como puedes ver, esto genera que tu elemento se convierta en un cuadrado, así:
3. Redondear las esquinas con CSS
Para crear un círculo con HTML y CSS, debemos redondear las esquinas de este cuadrado. Esto lo logramos con la propiedad de CSS border-radius
en 50%. Entonces, nuestro CSS quedaría así:
.circulo{ background-color: blue; width: 100px; height: 100px; border-radius: 50%; }
¡Listo! Ahora mira el resultado, un círculo usando solo HTML y CSS:
Puedes leer un poco más sobre cómo funciona la propiedad border-radius y también entender por qué usamos 50% para el radio de borde. Si tienes cualquier duda, por favor déjanos un comentario para poder ayudarte.