The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "SVG" Oct 14 - 6:30 PM Eastern
Get a free trial // Grow your CSS skills // Land your dream job

how to add border to progress bar done in css3 and jquery

  • # December 18, 2012 at 1:48 am

    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.

    # December 18, 2012 at 4:44 am

    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)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed