Different ways to use a Circle in CSS

If you’re looking for a new and different design element to spice up your website, then you might want to consider using CSS Circle. CSS circle is an easy way to create the illusion of a circular object without having any images.

In this article, I’m going to explore a variety of ways to make a circle with CSS and look at how they stack up against each other.

Different ways to use a Circle in CSS

1. How to create basic css circle?

basic css example

Html Code:

<!--We are using div tags to make directly use of css code--> 
<div class="circle"></div>
<!--End of Circle--> 

CSS Code:

/* CSS Circle */ 
.circle{ 
	width: 150px; 
	height:150px; 
	border-radius: 50%; 
	background-color: #FC0;
} 

Explanation:

Here we have taken a <div> element and add a CSS class .circle. We have also set it’s height and width 150px. To make the div element circle we have to add border-radius: 50%;

2. How to create css circle with border?

css circle border

Html Code:

<!--We are using div tags to make directly use of css code--> 
<div class="circle"></div>
<!--End of Circle--> 

CSS Code:

.circle{ 
	width: 150px; 
	height:150px; 
	border-radius: 50%; 
	background-color: #FC0;
	border: 5px solid green;
}

Explanation:

Here we have just added border: 5px solid green; to make a green border around the circle.

3. How to create css circle image?

css circle image

Html Code:

<img src="image.jpeg" />

CSS Code:

img { 
	width : 150px; 
	height : 150px; 
	border-radius : 50%; 
} 

Explanation:

Simple add border-radius : 50%; to make the image circle.

4. How to create css circle progress bar?

Circle progressbar

Html Code:

<svg>
	<circle cx="75" cy="75" r="60" stroke="#428bca" stroke-width="6" fill="#fff" />
</svg> 

CSS Code:

svg {
  transform: rotate(-90deg);
  stroke-dasharray: 377; /* (2PI * 60px) */
  stroke-dashoffset: 377;
  animation: offsettozero 5s linear forwards;
  height: 150px;
  width: 150px
}

@keyframes offsettozero {
  to {
    stroke-dashoffset: 0;
  }
}

Explanation:

In the above example, I have used SVG to make a circular progress bar without using any javascript. The cx, cy is the coordinate value and the r is the radius of that circle.

We have calculated the stroke-dasharray value using (2PI * 60px).

5. How to create a CSS circle with percentages?

css circular  progress bar with percentage

Html Code:

<svg class="circle">
	<circle r="50" cx="100" cy="100"/>
	<path fill="none" stroke-linecap="round" stroke-width="7" stroke="#ffa" stroke-dasharray="250,250"
		d="M100 60 A1 1 0 0 1 100 140
		A1 1 0 0 1 100 60"/>
	<text class="percentage" text-anchor="middle" x="100" y="100">0</text>
</svg> 

CSS Code:

.circle {
	fill: #ffc107;
	width: 150px;
	height: 150px;
}
.percentage{
	fill: #fff;
	font-size: 16px;
}

JS Code:

var path = document.querySelector('.circle path');
var text = document.querySelector('.circle .percentage');
var length = path.getTotalLength();
var i = 0;
var count = 0;
var ticks = 50;
setInterval(function() {
  if (i < length+length/ticks) {
	path.setAttribute('stroke-dasharray', i+","+length);
	i+=length/ticks;
	text.innerHTML=Math.round((count++/ticks)*100);
  }
  
}, 100);

Explanation:

In our SVG, we have used the circle, path, and text elements. Now by using setInterval() function, we are incrementing the stroke-dasharray value here.

The count variable is used to increment the progress percentage.

6. How to create css circle button?

css circle button

Html Code:

<label class="circle" for="toogle">
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
</label>

CSS Code:

.circle {
	display: block;
	position: relative;
	padding: 0;
	z-index: 98;
	margin: 0 auto;
	box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
	border-radius: 50%;
	height: 60px;
	width: 60px;
	background-color: #3F51B5;
	transition: 0.2s;
	text-align: center;
}
.circle:active {
	transform: scale(0.9);
	box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.3);
}
.circle:hover {
	cursor: pointer;
	background-color: #606fc7;
	box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.3);
}
.circle svg {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -15px;
	margin-top: -15px;
	width: 30px;
	height: 30px;
	transition: 0.5s;
	transform: rotate(180deg);
	fill: #fff;
}

Explanation:

This is a basic code to make a rounded button. Here we have set border-radius and box-shadow to make our button circular and show some shadow outside the button.

In .circle:active pseudo-class, we are using transform: scale(0.9); to scale the button.

7. How to create a CSS circle with the hole?

css circle with hole

Html Code:

<div class="holo-circle"></div>

CSS Code:

body{
	background: #ff0000;
}
.holo-circle{
	position:relative;
	width:500px; height:200px;
	margin:0 auto;
	overflow:hidden;
}
.holo-circle:after{
	content:'';
	position:absolute;
	left:175px; top:25px;
	border-radius:100%;
	width:150px; height:150px;
	box-shadow: 0px 0px 0px 2000px #E3DFD2;
}

Explanation:

You can make a div with overflow:hidden and create a round pseudo-element inside it with border-radius. Give it a huge box-shadow, too without background color.

Final Word

I hope that after reading this article, you will be more confident in using Circles in your CSS. And if you have any questions or need help implementing a Circle design, feel free to comment here!

About Ashis Biswas

A web developer who has a love for creativity and enjoys experimenting with the various techniques in both web designing and web development. If you would like to be kept up to date with his post, you can follow him.

Leave a Comment