The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS how to add border to progress bar done in css3 and jquery

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #41411

    Long story short
    Used progress bar code from CSS tricks. Cannot add border to the progress bar without making it look worse.

    Long story
    I used the progress bar code from CSS tricks at

    I made several changes to the original code to get something that looks like this

    What I wanted to accomplish

    1. the meter > span has a gradient **(done)**
    2. the meter and span are snug tight with no spacing between them **(done)**
    3. the span has a 1 or 2px border of a different color.

    Note that those marked **(done)** are accomplished. Please see the demo [here][2].

    What I tried and gotten as a result
    – I have tried adding border to the meter > span but that resulted in the span being much larger.
    – I have tried adding padding to the meter > span. Same story.
    – I have tried adding margin to the meter itself. Then it looks like there is spacing.

    What I need
    Requirements 1 , 2, and 3 to work.


    1. is this your full app?

    No. I did a reduced test case where i stripped out as much un-necessary code to explain my problem without affecting the problem statement as possible.


    1. I have cross-posted this same question at over [here]( “so”) to gather greater attention to my problem.


    Hat tip to sandeep at stackoverflow.

    If understand your question you can use CSS box-sizing property for this. Write like this:

    .meter > span{
    border:2px solid red;
    For more you can read this

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.