Si exploramos el gran potencial que nos ofrece CSS, seguramente podremos descubrir un mundo de posibilidades para dar estilos a los elementos de nuestras páginas HTML.

Mediante CSS3 es posible crear una gran variedad de formas, aplicando algunos trucos muy interesantes. En este artículo analizaremos como crear círculos con CSS empleando border-radius.

La propiedad border-radius para crear círculos con CSS

Con la llegada de CSS3, quienes llevamos años en el mundo del diseño y desarrollo Web, hemos encontramos una variada gama de características nuevas que nos facilitan el trabajo.

Entre las opciones más simples y potentes, encontramos la propiedad border-radius. Tal como su nombre en inglés lo indica, nos sirve para redondear los bordes de las cajas.

Claro que si recurrimos a nuestra creatividad, podremos crear también círculos, aplicando los valores adecuados.

Por ejemplo, para crear un círculo rojo de 100px de diámetro, podríamos recurrir a la siguiente código de CSS:

#circulo{width:100px; height:100px; background:red; border-radius:50px;}

Como podemos ver en el código, si utilizamos un border-radius de la mitad del alto/ancho de un cuadrado, podremos obtener un círculo. Si deseamos profundizar como establecer las medidas de la caja, podremos leer el artículo: Cómo asignar el tamaño a un elemento con CSS.

En este ejemplo hemos trabajado con un fondo de color sólido, pero también es posible aplicar un gradient. Para este caso podemos recurrir a una herramienta que nos ayuda, como un Generador de Gradientes con CSS3.

Otra alternativa al aplicar un fondo con CSS, además de color o gradient, también puede ser usar una o varias imágenes.

Al crear caja, que podemos transformar en círculos, es importante señalar que también podremos anidar contenido de texto. Y para ajustar su posición interior es recomendable recurrir, desde CSS, a flex-box.

En conclusión

Como siempre les cuento a mis alumnos, CSS ha evolucionado de manera notable desde sus primeros tiempos hasta la actualidad. Desde nuevas capacidades para el diseño hasta la posibilidad de animar, este lenguaje ha crecido de manera significativa.

Crear círculos con CSS es una opción sencilla que nos puede ayudar a resolver una variedad de situaciones que se nos pueden presentar en el armado de una maqueta. Por esta razón bien vale conocer como hacerlo y aprender a resolverlo en pocos pasos, como vimos en este artículo.