How to add a Circle around a Number in CSS

In this guide, we will explore the process of encircling a numerical value using CSS by leveraging different illustrations. It is achievable to enclose the number within a circular shape by utilizing CSS attributes such as border-radius, height, and width.

Here are different instances of encircling a numeral.

Example 1:

Example


<! DOCTYPE html>
<html>
  <head>
meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
    <title> How to add a Circle around a number in css </title>
   <style>
      :root {
  --color: #103;
  --direction: center;
  --distance: 15;
}
html {
    font-size: 15px;
    font-family: sans-serif;
}
body { 
  text-align: center;
  padding: 40px;
background: linear-gradient(124deg, #ff9200, #e81e1d, #e8b71d, #e9e81d, #1d9840, #1d9dde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1900% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 17s ease infinite;
-o-animation: rainbow 17s ease infinite;
  animation: rainbow 17s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@-moz-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@keyframes rainbow { 
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
h1 {
  font-weight: normal;
  font-size: 50px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
  color: red; 
}
h2 { 
text-align: center; 
color: #66a294; 
font-size: 38px; 
width: 100%;
 margin: 10px 10px; 
position: relative; 
line-height: 68px; 
font-weight: 600; 
}
h3 { 
text-align: center; 
color: #48a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10px; 
position: relative; 
line-height: 48px; 
font-weight: 500; 
}
h3:before { 
content: " "; 
position: absolute; 
left: 60%; 
bottom: 10; 
width: 100px; 
height: 4px;
font-weight: bold;
 background-color: #3079df; 
margin-left: -50px;
 }
h2:before { 
content: " "; 
position: absolute; 
left: 60%; 
bottom: 1; 
width: 100px; 
height: 3px;
font-weight: bold;
 background-color: #3079df; 
margin-left: -60px;
 }
           .md
    {
     width: 40%;
     margin: 10px auto;
     font-family: Lucida Console", "Courier New", monospace;
     padding: 20px;
     height: 90vh;
    text-align: center;
    }
     .md h1
     {
      font-family: Lucida Console", "Courier New", monospace;
      font-size: 24px;
      color: #000;
     }
.md h2
     {
      font-family: Lucida Console", "Courier New", monospace;
      font-size: 24px;
      color: #000;
     }
     .dot {
  height: 25px;
  width: 25px;
  background-color: green;
  border-radius: 50%;
  display: inline-block;
}
     .step
      {
       background: red;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 5px;
  text-align: center;
  width: 1.6em;
      }
    </style>
  </head>
 <body>
 <h3> Example </h3>
    <div class = "md">
    <h1> Round dots with numbers </h1>
  <span class = "dot"> 1 </span>
  <span class = "dot"> 2 </span>
  <span class = "dot"> 3 </span>
  <span class = "dot"> 4 </span>
  <h2> Circles with Number </h2>
  <span class = "step"> 1 </span>
  <span class = "step"> 2 </span>
  <span class = "step">3 </span>
  <span class = "step"> 4 </span>
    </div>
  </body>
</html>

Explanation:

In the previously mentioned example, we have illustrated the process of encircling a number using CSS.

Output:

Following is the output of this example.

Example 2: