How To Create CSS Circles (With Text) – Simple Examples

Welcome to a tutorial on how to create circles with CSS, and adding text to them. Once upon a time in the Stone Age of the Internet, we literally have to use circle images and there are no alternatives. But it is a total breeze to create circles with modern CSS.

To create a basic circle in HTML and CSS:

  1. Start with a <div class="circle">.
  2. Give it the same width and height – .circle{ width:100px; height:100px; }
  3. Turn it into a circle – .circle{ border-radius: 50%; }

Yep, it’s that simple. But just how do we add text to a circle? Create a responsive circle? Let us walk through a few of those tricks and examples in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes CSS Circles Useful Bits & Links
Tutorial Video The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

CREATING CSS CIRCLES

All right, let us now get into the various examples of creating circles in HTML and CSS.

 

EXAMPLE 1) BASIC FIXED CIRCLE

THE HTML & CSS

1-basic-circle.html
<style>
.circle {
  /* (A) SAME WIDTH & HEIGHT - SQUARE */
  width: 200px;
  height: 200px;
 
  /* (B) 50% RADIUS = CIRCLE */
  border-radius: 50%;
 
  /* (C) BACKGROUND COLOR */
  background: #bcd6ff;
}
</style>

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

RESULT

THE EXPLANATION

There is no rocket science in creating basic circles with CSS. Just define the same width and height, then add border-radius: 50% – Effectively turns into a circle.

 

 

EXAMPLE 2) RESPONSIVE CIRCLE

THE HTML & CSS

2-responsive-circle.html
<style>
/* (A) PERCENTAGE WIDTH & 50% BORDER RADIUS */
.res-circle {
  width: 20%;
  border-radius: 50%;
  background: #bcd6ff; 
}
 
/* (B) USE ::AFTER TO CREATE MATCHING HEIGHT */
/* Credits - https://spin.atomicobject.com/2015/07/14/css-responsive-square/ */
.res-circle::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
</style>
 
<div class="res-circle"></div>

RESULT

THE EXPLANATION

Creating a responsive circle requires a small trick.

  • Start with setting a percentage width and border-radius: 50%.
  • All that’s left is to have a matching height, but setting height: 20% will not work here – It will scale to the height of the container, not match the width.
  • Thankfully, all it takes to create an equal height is a simple trick – Use ::after to add an empty block of padding-bottom: 100%.

 

 

EXAMPLE 3) “3D SPHERE” WITH GRADIENT & SHADOW

3-sphere.html
<style>
.res-sphere {
  /* (A) PERCENTAGE WIDTH & BORDER RADIUS */
  width: 20%;
  border-radius: 50%;
 
  /* (B) FAKE 3D SPHERE */
  /* http://www.colorzilla.com/gradient-editor/ */
  background: linear-gradient(135deg, #a7cfdf 0%,#23538a 100%);
  /* https://html-css-js.com/css/generator/box-shadow/ */
  box-shadow: inset -8px -7px 4px 0px rgba(0,0,0,0.3);
}
 
/* (C) MATCH HEIGHT */
.res-sphere:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
</style>
 
<div class="res-sphere"></div>

RESULT

THE EXPLANATION

Well, this is the same responsive circle, but with a gradient background and box-shadow – This is a nice trick for you guys who want to create “fake 3D spheres”.

 

 

EXAMPLE 4) ADDING TEXT

4-responsive-circle-text.html
<style>
.res-circle {
  /* (A) PERCENTAGE WIDTH & BORDER RADIUS */
  width: 20%;
  border-radius: 50%;

  /* (B) BACKGROUND COLOR */ 
  background: #bcd6ff;
 
  /* (C) NECESSARY TO POSITION TEXT BLOCK */
  line-height: 0;
  position: relative;
}
 
/* (D) MATCH HEIGHT */
.res-circle::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
 
/* (E) TEXT BLOCK */
.circle-txt {
  /* (E1) CENTER TEXT IN CIRCLE */
  position: absolute;
  bottom: 50%;
  width: 100%;
  text-align: center;
 
  /* (E2) THE FONT - NOT REALLY IMPORTANT */
  font-family: arial, sans-serif;
  font-weight: bold;
}
</style>
 
<div class="res-circle">
  <div class="circle-txt">Foo Bar!</div>
</div>

RESULT

Foo Bar!

THE EXPLANATION

Adding text to a responsive circle is unfortunately a little more complicated. Directly adding text into the circle (<div class="res-circle">TEXT</div>) will destroy the proportions, and end up with an oval. To “fix” this problem:

  • First, we insert a <div class="circle-txt"> block to contain the text.
  • Set .res-circle to position: relative and line-height: 0. These will allow us to properly center .circle-txt.
  • To center .circle-txt in .res-circle:
    • Set it position: absolute.
    • bottom: 50% will vertically center the text block inside the circle.
    • width: 100% and text-align: center will center the text horizontally.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

REFERENCES & LINKS

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

Responsive CSS Circles (Click to Enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

1 thought on “How To Create CSS Circles (With Text) – Simple Examples”

Leave a Comment

Your email address will not be published. Required fields are marked *