205

I'm wondering if there's an easier way to create circular divs than what I'm doing now.

Currently, I am just making an image for each different size, but it's annoying to do this.

Is there anyway using CSS to make divs which are circular and I can specify the radius?

4
  • 1
    What browsers must this be supported in?
    – thirtydot
    Jan 30, 2011 at 2:24
  • Have a look at my answer to this related question, particularly the demos: stackoverflow.com/questions/4451350/…
    – Orbling
    Jan 30, 2011 at 2:26
  • 1
    You can also use SVG(VML) to make a circle.
    – jasssonpet
    Jan 30, 2011 at 9:08
  • 2
    Why can't you resize your image's width and height instead of making different sizes? How big are these images?
    – Mottie
    Jan 30, 2011 at 14:26

15 Answers 15

321

Here's a demo: http://jsfiddle.net/thirtydot/JJytE/1170/

CSS:

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

HTML:

<div class="circleBase type1"></div>

<div class="circleBase type2"></div><div class="circleBase type2"></div>

<div class="circleBase type3"></div>

To make this work in IE8 and older, you must download and use CSS3 PIE. My demo above won't work in IE8, but that's only because jsFiddle doesn't host PIE.htc.

My demo looks like this:

6
  • I can not make div circular in chrome.It works in Mozilla though..My url is chokate.maninactionscript.com/chokates click on the desert image or the one previous to it the div shown on zooming of image is not circular..which is in mozilla.
    – techie_28
    Jan 6, 2012 at 15:19
  • 1
    @techie_28: The div on your page is round, which you can see if you add for instance border: 5px solid red to it. The problem is that the parts of the image that "overhang the circle" are not being hidden. None of the usual workarounds are particularly easy to apply here.. I suggest using the -webkit-mask-image property to fix WebKit browsers (and keep border-radius, for other browsers). More info here: webkit.org/blog/181/css-masks. You might also consider asking a question here on Stack Overflow, to see if anyone else has any other ideas.
    – thirtydot
    Jan 6, 2012 at 15:57
  • 1
    You could also do 100% instead of 999px. Jul 19, 2013 at 5:35
  • 1
    .htc is not longer supported. Dec 2, 2015 at 21:11
  • I wonder how to align objects (like buttons) inside a round div! :D
    – Zibri
    Jul 22, 2018 at 13:56
35

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 */
}
1
  • 2
    This is probably the method that should be used now (in 2017). Jun 22, 2017 at 12:42
13

Try this

.iphonebadge {
  border-radius:99px;
 -moz-border-radius:99px;
 -webkit-border-radius:99px;
  background:red;
  color:#fff;
  border:3px #fff solid;
  background-color: #e7676d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e7676d), to(#b7070a)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #e7676d, #b7070a); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(top, #e7676d, #b7070a); /* FF3.6 */
  background-image: -ms-linear-gradient(top, #e7676d, #b7070a); /* IE10 */
  background-image: -o-linear-gradient(top, #e7676d, #b7070a); /* Opera 11.10+ */
  background-image: linear-gradient(top, #e7676d, #b7070a);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e7676d', EndColorStr='#b7070a'); 
 -webkit-box-shadow: 0px 2px 4px #000000; /* Saf3-4 */
 -moz-box-shadow: 0px 2px 4px #000000; /* FF3.5 - 3.6 */
  box-shadow: 0px 2px 4px #000000; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
  display:inline-block;
  padding:2px 2px 2px 2px ;
  margin:3px;
  font-family:arial;
  font-weight:bold;
   }
0
7

It is actually possible.

See: CSS Tip: How to Make Circles Without Images. See demo.

But be warned, It has serious disadvantages in terms of compatibility basically, you are making a cat bark.

See it working here

As you will see you just have to set up the height and width to half the border-radius

Good luck!

1
  • Hi, thanks for your jsfiddle link! This link is the only one working from your answer for now. ;)
    – TooroSan
    Oct 8, 2014 at 7:03
7

I have 4 solution to finish this task:

  1. border-radius
  2. clip-path
  3. pseudo elements
  4. radial-gradient

#circle1 {
  background-color: #B90136;
  width: 100px;
  height: 100px;
  border-radius: 50px;/* specify the radius */
}

#circle2 {
  background-color: #B90136;
  width: 100px;/* specify the radius */
  height: 100px;/* specify the radius */
  clip-path: circle();
}

#circle3::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50px;/* specify the radius */
  background-color: #B90136;
}

#circle4 {
  background-image: radial-gradient(#B90136 70%, transparent 30%);
  height: 100px;/* specify the radius */
  width: 100px;/* specify the radius */
}
<h3>1 border-radius</h3>
<div id="circle1"></div>
<hr/>
<h3>2 clip-path</h3>
<div id="circle2"></div>
<hr/>
<h3>3 pseudo element</h3>
<div id="circle3"></div>
<hr/>
<h3>4 radial-gradient</h3>
<div id="circle4"></div>

4

Let's say you have this image:

to make a circle out of this you only need to add

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
}

So if you have a div you can do the same thing.

Check the example below:

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
  animation: stackoverflow-example infinite 20s linear;
  pointer-events: none;
}

@keyframes stackoverflow-example {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<div>
  <img class="circle" src="https://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.javascript.png">
</div>

0
3

There's also [the bad idea of] using several (20+) horizontal or vertical 1px divs to construct a circle. This jQuery plugin uses this method to construct different shapes.

3

Give width and height depending on the size but,keep both equal

.circle {
  background-color: gray;
  height: 400px;
  width: 400px;
  border-radius: 100%;
}
<div class="circle">
</div>

1
  • 3
    border-radius: 50%; is enough. Aug 1, 2015 at 20:25
3

.fa-circle{
  color: tomato;
}

div{
  font-size: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><i class="fa fa-circle" aria-hidden="true"></i></div>

Just wanted to mention another solution which answers the question of "Easier way to create circle div than using an image?" which is to use FontAwesome.

You import the fontawesome css file or from the CDN here

and then you just:

<div><i class="fa fa-circle" aria-hidden="true"></i></div>

and you can give it any color you want any font size.

2

You can try the radial-gradient CSS function:

.circle {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ff0a0a 19%, #ff2828 40%, #000000 41%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

Apply it to a div layer:

<div class="circle"></div>
2

.circle {
	height: 20rem;
	width: 20rem;
	border-radius: 50%;
	background-color: #EF6A6A;
}
<div class="circle"></div>

1

You can use radius but it will not work on IE: border-radius: 5px 5px;.

0
0

basically this uses div's position absolute to place a character at the given coordinates. so using the parametric equation for a circle, you can draw a circle. if you were to change div's position to relative, it'll result in a sine wave...

in essence we are graphing equations by abusing the position property. i'm not versed well in css, so someone can surely make this more elegant. enjoy.

this works on all browsers and mobile devices (that i'm aware of). i use it on my own website to draw sine waves of text (www.cpixel.com). the original source of this code is found here: www.mathopenref.com/coordcirclealgorithm.html

    <html>
    <head></head>
    <body>
    <script language="Javascript">

    var x_center = 50; //0 in both x_center and y_center will place the center
    var y_center = 50; // at the top left of the browser
    var resolution_step = 360; //how many times to stop along the circle to plot your character.
    var radius = 50; //how big ya want your circle?
    var plot_character = "·"; //could use any character here, try letters/words for cool effects
    var div_top_offset=10;
    var div_left_offset=10;
    var x,y;

    for ( var angle_theta = 0;  angle_theta < 2 * Math.PI;  angle_theta += 2 * Math.PI/resolution_step ){
        x = x_center + radius * Math.cos(angle_theta);
        y = y_center - radius * Math.sin(angle_theta);
        document.write("<div style='position:absolute;top:" + (y+div_top_offset) + ";left:"+ (x+div_left_offset) + "'>" + plot_character + "</div>");
    }

    </script>
    </body>
    </html>
1
0

Adding the css property of:

border-radius: 50%;

to any div makes it circular.

-1

For circle, create a div element and then enter width = 2 times of the border radius = 2 times padding. Also line-height = 0 For example, with 50px as radii of the circle, the below code works well:

width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.