CSS split bar graph with solid border radius - border

Question

I'm trying to let a div container with a black background substitute as the border style for a bar graph that has a border radius. Here's the HTML/CSS:
HTML:
<div class="graph-outer">
<div class="inner-left-cap"></div>
<div class="inner-left-bar">40%</div>
<div class="inner-right-bar">60%</div>
<div class="inner-right-cap"></div>
</div>
CSS:
.graph-outer {
background-color: black;
height: 20px;
width: 300px;
border-radius: 10px;
padding: 1px;
}
.inner-left-cap {
background: orange;
width: 2%;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
}
.inner-left-bar {
background: orange;
width: 38%;
height: 100%;
text-align: center;
float: left;
}
.inner-right-cap {
background: red;
width: 2%;
height: 100%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
.inner-right-bar {
background: red;
width: 58%;
height: 100%;
text-align: center;
float: left;
}
http://jsfiddle.net/2ZkDz/115/
The issue in which I am having is that the corners don't look as if they have any black border style whatsoever. What can I do?

Answer 1

Use this version with overflow:hidden and a explicit border on your outer controller and no padding.
.graph-outer {
background-color: black;
height: 20px;
width: 300px;
border:1px solid black;
border-radius: 10px;
overflow:hidden;
}
.inner-left-cap {
background: orange;
width: 2%;
height: 100%;
float: left;
}
.inner-left-bar {
background: orange;
width: 38%;
height: 100%;
text-align: center;
float: left;
}
.inner-right-cap {
background: red;
width: 2%;
height: 100%;
float: left;
}
.inner-right-bar {
background: red;
width: 58%;
height: 100%;
text-align: center;
float: left;
}
​
http://jsfiddle.net/2ZkDz/116/

Answer 2

I've updated your CSS, I changed the caps to 3% each and made the bars smaller. The bar on the inside was going over the caps.
.graph-outer {
background-color: black;
height: 20px;
width: 300px;
border-radius: 10px;
padding: 1px;
}
.inner-left-cap {
background: orange;
width: 3%;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
}
.inner-left-bar {
background: orange;
width: 37%;
height: 100%;
text-align: center;
float: left;
}
.inner-right-cap {
background: red;
width: 3%;
height: 100%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
.inner-right-bar {
background: red;
width: 57%;
height: 100%;
text-align: center;
float: left;
}
​
http://jsfiddle.net/2ZkDz/119/

Answer 3

http://jsfiddle.net/2ZkDz/120/
border-radius: 10px;
padding: 2px;
That should do it! I just threw on a border-radius and bumped up the padding 1. There should be an easier way using the actual border property but im feeling lazy and this does it

Answer 4

a solution without the end-caps (that way the bar width matches the values)
demo jsfiddle
the graph-outer is 20px tall so the nested bars are 18px (20px - 2px (1px top/bottom padding)), set the border-radius on the bars to 9px each (half of the height so each corner is uniform and matches the parents curvature)
.inner-left-bar {
background: orange;
width: 40%;
height: 100%;
text-align: center;
float: left;
border-radius:9px 0 0 9px; /* add this */
}
.inner-right-bar {
background: red;
width: 60%;
height: 100%;
text-align: center;
float: left;
border-radius:0 9px 9px 0; /* and this */
}
/* and drop the end-caps */
​