CODEWITHSUNDEEP
htmlcssgeometrycss-shapes
bmaster
bmaster

Reputation: 2373

Easier way to create circle div than using an image?

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?

Upvotes: 212

Views: 477720

Answers (15)

Abraham
Abraham

Reputation: 9865

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>

Upvotes: 4

dabeng
dabeng

Reputation: 1450

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>

Upvotes: 7

Druhin
Druhin

Reputation: 76

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

Upvotes: 2

Mrinal Roy
Mrinal Roy

Reputation: 11

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;

Upvotes: -1

Eshiett Oto-obong
Eshiett Oto-obong

Reputation: 418

Adding the css property of:

border-radius: 50%;

to any div makes it circular.

Upvotes: 0

Munna Kumar
Munna Kumar

Reputation: 535

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>

Upvotes: 2

user3494047
user3494047

Reputation: 1693

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

Upvotes: 3

HAJJAJ
HAJJAJ

Reputation: 3777

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

Upvotes: 1

vinayak hegde
vinayak hegde

Reputation: 2222

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>

Upvotes: 3

sickz
sickz

Reputation: 9

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>

Upvotes: 0

thirtydot
thirtydot

Reputation: 228162

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:

Upvotes: 326

Tamik Soziev
Tamik Soziev

Reputation: 14798

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 */
}

Upvotes: 38

iSafa
iSafa

Reputation: 175

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;
   }

Upvotes: 13

Trufa
Trufa

Reputation: 40717

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!

Upvotes: 7

kelloti
kelloti

Reputation: 8951

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.

Upvotes: 3

Related Questions