O'Reilly

CSS Circles

By on  
CSS Circle

A while back I shared a clever technique for creating triangles with only CSS. Over the past year, I've found CSS triangles incredibly effective, especially when looking to create tooltips or design elements with a likewise pointer pattern. There's another common shape that's easy to create, and that is the circle. Using border-radius, you can create wonderful CSS circles.

The CSS

Setting the border-radius of each side of an element to 50% will create the circle display at any size:

.circle {
	border-radius: 50%;
	width: 200px;
	height: 200px; 
	/* width and height can be anything, as long as they're equal */
}

It's really that simple...but I can't let this post go without touching on CSS gradients and basic spin animation:

/* Create the animation blocks */
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Spinning, gradient circle; CSS only! */
#advanced {
	width: 200px;
	height: 200px;
	
	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
	background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
	background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
	
	animation-name: spin; 
	animation-duration: 3s; /* 3 seconds */
	animation-iteration-count: infinite; 
	animation-timing-function: linear;
}

Voila. There's an awesome CSS circle!

CSS circles don't immediately appear as useful as CSS triangles, but they surely have value within design. An animated set of circles could act as a loading animation; creative use of the circle is up to you. Can you think of a good CSS circle usage? Share!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

  • CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Incredible Demos

Discussion

  1. Few notes: percentages in border radiuses isn’t as well supported as other values (px, em, et al). Sorry I don’t know the exact browsers/versions.

    Also, widths and heights don’t have to be the same. They do if you want to make a circle, but if not, you get an ellipse (also useful).

    Chris “Captain Vague” Coyier

    • Per your points:

      1. Likely, though using percentage is the “flexible” value.

      2. Also correct; I was going to do a separate post about ellipsis’, so you just ruined it. Pfff. j/k

    • As I recall you could just set a really high number of pixels to get a circle (if you are correct about the % not being well supported). There is some point where you can’t set the border radius any higher, am I right?

    • As I recall you can just set a really high px count for the border radius to get the same effect (if you are correct about % not being as well supported). There is some point where eventually you can’t set the border radius any higher.

    • Chris, I had no idea that percentage values in border-radius wasn’t very well supported – I’ve never had any issues!

      However I *have* had issues using 50% due to rounding bugs (particularly in Webkit) sometimes resulting in not-quite-round edges. I almost always use 100% as a workaround.

    • If you don’t want to use a percentage and you were using a preprocessor then you could get around it. Although I have never had any problems with percentages.

      // Circle mixin with LESS
      .circle(@size: 0) {
      	width: @size;
      	height: @size;
      	
      	-webkit-border-radius: @size / 2 + 0px;
      	-moz-border-radius: @size / 2 + 0px;
      	border-radius: @size / 2 + 0px;
      }
      

      Or you could of course just work it out manually…

      .circle {
      	width: 100px;
      	height: 100px;
      	
      	-webkit-border-radius: 50px;
      	-moz-border-radius: 50px;
      	border-radius: 50px;
      }
      
    • Safari 4 is one example I recently found.

  2. Good one David…

  3. You know a great idea when your first thought is: Why didn’t I think of that?

  4. Nathan D. Ryan

    It’s worth noting that different mechanisms for CSS circles have potentially different anti-aliasing at the circumference. I remember finding 50% border radius circles to look best. At the time, though, Safari didn’t support percentage values for a border radius…

  5. Awesome and simple! Nice one David.

    Btw, if there are any CSS pre-processor-users out there (like LESS.js) you could make a simple function for it too:

    .circle(@size: 50) {
    border-radius: 50%;
    width: @size * 1px;
    height: @size * 1px;
    }

    Keep up the great work !

  6. great work :) hope you can get it work on IE too :)

  7. David

    My only issue with making circles, shadows and gradients with css is my boss still doesn’t understand it, when I show him a new button and proudly announce that there are no images used in its creation he look at me like I just clubbed a baby seal.

    • You’re so right, Andy.

      But then, the boss just can’t do what you do, right?

    • Ha ha! Andy, that is the best comment ever “he look at me like I just clubbed a baby seal”. I am a few years late for this one, but glad I finally stumbled upon it!

  8. I have notice this interesting fact- (The generalized CSS for a circle of any size )

    .circle{
                 width:[width of the element];       /*The width Must be equal to the height*/
                 height:[height of the element];
                 border-radius:[more than or equal to 50 % of the width or height];
                -moz-border-radius:[more than or equal to 50 % of the width or height];
                -webkit-border-radius:[more than or equal to 50 % of the width or height];
                background-color:[circle color];
    }
    

    Note: The unit for the border-radius value should be in px/em because some browsers do not support %. (Safari win v 5.0.5 etc.).

    I don’t know whether all the browsers will display the same result or not.

  9. Mike Taylor

    You’ve forgotten that Opera supports CSS animations now–and IE 10 will support animations w/o the prefix.

  10. ram

    it was not work on IE7 what should i do?

  11. Fantastic, never thought it can be that easy.

  12. Xis Lauj

    Thank you. However, I have one other question left. How can you create the circle image and add a hyperlink to a site you want viewers to look at?

  13. how to make border style is circle look like this: http://i.imgur.com/zpQm3MG.jpg
    i tried border radius 50% and border style dotted but result is not good

    thank a lot.

  14. Manisha M

    Thank you so much for this article. I’ve been stuck creating hideous circles using CSS all morning.

  15. Nitya Maity

    Thanks. It help me a lot and save my time.

  16. Shefali

    I am using them as a background for x on my close buttons. They sit neatly at one corner of my forms. The circle makes the x look more complete.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...

  • Automated Tests for Visual Responsive Layouts

    Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or...

  • Getting Dicey With Flexbox

    What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...