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 http://css-tricks.com/css3-progress-bars/

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

    http://dl.dropbox.com/u/8743819/reducedtestcase/ProgressBars/custombar.html

    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.

    FAQs
    ====

    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.

    Disclosure
    ==========

    1. I have cross-posted this same question at stackoverflow.com over [here](http://stackoverflow.com/questions/13927733/how-to-add-border-to-progress-bar-done-in-css3-and-jquery “so”) to gather greater attention to my problem.

    # December 18, 2012 at 4:44 am

    Hat tip to sandeep at stackoverflow.
    http://stackoverflow.com/a/13929619/80353

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

    .meter > span{
    border:2px solid red;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    }
    For more you can read this http://css-tricks.com/box-sizing/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".