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

[kimsia]

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 https://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.

[kimsia]

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 https://css-tricks.com/box-sizing/

[Author]

Posts