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.
