Styled CSS circle with a partially filled border color and a numerical value enclosed within

Question

Styled CSS circle with a partially filled border color and a numerical value enclosed within

I want to create a unique design for a circle with a centered number and partially colored border like this:

https://i.sstatic.net/rOzWA.png

My goal is to highlight the circle based on a number ranging from 0-100.

Here is my current code for creating the circle:

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

However, I am struggling to dynamically change the border color based on the number and center the text within the circle.

Here's what it looks like currently: https://i.sstatic.net/3bD1J.png

html css

Answer 1

Answer №1

This resource can assist you in changing the background color by visiting this website and creating gradients according to your requirements. If you have any further questions, feel free to 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>

Answer 2

This resource can assist you in changing the background color by visiting this website and creating gradients according to your requirements. If you have any further questions, feel free to 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>

Styled CSS circle with a partially filled border color and a numerical value enclosed within

Answer №1

Similar questions

What could be causing the slight imperfection in the alignment of this CSS checkbox slider switch?

Adding a row from two drop-down lists to a table and deleting it upon selection

Retrieve text from a dropdown menu while excluding any numerical values with the help of jQuery

Can I leverage Bootstrap's 5 grid system exclusively?

What's the best way to ensure that Bootstrap columns have consistent height with space in between?

Adding multiple checkboxes to a single database field

To include a slash or not before the assets path in HTML - that is the question

I am encountering difficulties retrieving all image attributes with Beautiful Soup and Selenium

The issue of misaligned display of HTML and CSS rectangles

When selecting an option, the radio button becomes unresponsive and locked in

"Exploring the Issue of Undefined Materialize CSS Text Area When Used as an Object

Using JavaScript to open a new window and display CSS while it loads

Using PHP DOM document, extract the menu array from an HTML string

Instructions on making one script activate another [jQuery] for resizing and enlarging a search box

Verify the status of the nested reactive forms to determine if the child form is in a dirty state

Navigational inconsistency with SVG icons integrated into Bootstrap Navbar

The WebView component is unable to display internally stored CSS files within the project

What is the best way to retrieve data from ng-controller to use in the 'src' attribute of an <img> tag?

Create a new div element called "aside" and place it within the existing div

Is there a way to modify just the homepage url of the logo on a WordPress website using the OceanWP theme?