CSS Circles

Discussion

1. Chris Coyier

   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
• David Walsh

  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
• Bradley Rosenfeld

  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?
• Bradley Rosenfeld

  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.
• Dan Eden

  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.
• Oliver Caldwell

  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;
  }
  
• Chris Coyier

  Safari 4 is one example I recently found.
2. Aamir Maniar

   Good one David…
3. Kato

   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. Anders Schmidt Hansen

   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. bookspar

   great work :) hope you can get it work on IE too :)
7. Andy Paddock

   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.
• Tom49er

  You’re so right, Andy.

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

  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. Kanchan Gogoi

   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. Bhimbim

    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. Cân ô tô

    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.
17. neer

    best way to create circle in css :)
    http://sqeets.com/articles/making-a-circle-in-html-using-css/
18. ChrisLee

    where, is anybody can make an circle without predefined the box size?

    e.g:
    text leng 1

    long long long text
19. s

    position: absolute; height: 270px; top: 145px; left: 315px;
20. Davo

    thanks for the circle code. how do you add text to sit in the circle?