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!

Track.js Error Reporting

Recent Features

  • Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

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

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...