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. Los campos requeridos están marcados *


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