Treehouse

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!

ydkjs-1.png

Recent Features

Incredible Demos

  • Resize an Image Using Canvas, Drag and Drop and the File API

    Recently I was asked to create a user interface that allows someone to upload an image to a server (among other things) so that it could be used in the various web sites my company provides to its clients. Normally this would be an easy task—create a...

  • Create Twitter-Style Buttons with the Dojo Toolkit

    I love that JavaScript toolkits make enhancing web pages incredibly easy. Today I'll cover an effect that I've already coded with MooTools: creating a Twitter-style animated "Sign In" button. Check out this five minute tutorial so you can take your static...

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!