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

  • Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

  • HTML5’s window.postMessage API

    One of the little known HTML5 APIs is the window.postMessage API.  window.postMessage allows for sending data messages between two windows/frames across domains.  Essentially window.postMessage acts as cross-domain AJAX without the server shims. Let's take a look at how window.postMessage works and how you...

  • CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome,...

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

  • Access Mac Camera by Command Line

    With all of my recent command line tutorials, I've really gotten excited about the shell's simplicity and realized the true power of using the underlying technology of pretty UIs.  Since I work from home, I spend a lot of time on video calls, so when...

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...