How to Create a Circle with CSS

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

How to Create a Circle with CSS

Making a circle with css is a simple task;

Have your element (i.e. ‘.circle’) and set the css as follows;

Circle CSS

As long as your width and height are equal, you will create a perfect circle.
From here you can do some fun things using css;

With the @keyframes rule, we can create animations. It works by gradually changing one set of css styles into another set.
Specify from and to, which is similar to 0 – 100%.

Circle CSS

Now using only css, we can use some css3 features and make it spin;

Circle CSS

This will create a spinning circle with a gradient, with no images or additional requirements.
Something to remember is most css3 features are not available to those poor souls with older/legacy browsers, so keep in mind to degrade your sites and styles gracefully.

Cheers,

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Let’s Get Started!

COVID-19 Message

NetGain remains open during the pandemic.  Our team is working safely from home to help our clients through this unprecedented event.

As digital marketers, we are treating this interruption as a unique opportunity to help our clients stay active online and improve their web presence.  Together, we can transform a challenging situation into limitless opportunity.