0

I am trying to create a circle with a number centered and apply color to circle border partially like this:

enter image description here

Based on number I want to highlight the circle from 0-100.

So far I created circle like this:

#circle {
        border-color: lightgray;
        border-radius: 50%;
        border-style: solid;
        border-width: 5px;
        box-sizing: border-box;
        height: 100px;
        position: relative;
        width: 100px;
    }

<div id="circle">
   37
</div>

I am not able to figure out how to add the border color based on number/ and put number in center.

Current: enter image description here

Biplov
  • 1,136
  • 1
  • 20
  • 44

1 Answers1

0

This Can Help You And For Changing Background color you can goto this Website https://cssgradient.io/ And Make Gradient As per you need and if any more Doubt You can Ask

<!DOCTYPE html>
<html>
<head>
 
    <title>Border</title>
    <style>
        .outer_circle { 
            position: relative; 
            margin: 50px; 
            width: 100px; 
            height: 100px; 
            border-radius: 50%; 
            background: #ffffff; 
            display: flex;
        justify-content: center;
        place-items: center;
        font-size: 30px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        } 
          
        .inner_circle { 
            background-image: linear-gradient( 
                     to bottom, rgb(9, 112, 26) 0%, 
                     rgb(21, 255, 0) 100%); 
            content: ''; 
            position: absolute; 
            top: -10px; 
            bottom: -10px; 
            right: -10px; 
            left: -10px; 
            z-index: -1; 
            border-radius: inherit; 
          
        } 
    </style>
</head>
<body>
 
     <div class="outer_circle"> 37
        <div class="inner_circle"></div></div> 
</body>
</html>
Glossy Power
  • 73
  • 8