Cómo hacer un círculo con HTML y CSS

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.

Tutorial: Cómo hacer un círculo con HTML y CSS

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.

Si te sirvió, ¡compártelo!

También te interesaría...

Suscríbete a nuestra lista de correo

Agregue un comentario

Su dirección de correo no se hará público.


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.