border - 具有实心边框半径的 CSS 拆分条形图

Question

我试图让一个带有黑色背景的 div 容器替代为具有边框半径的条形图的边框样式。这是 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/

我遇到的问题是 Angular 落看起来不像有任何黑色边框样式。我能做什么？

Answer 1

将此版本与 overflow:hidden 一起使用，并在外部 Controller 上使用显式边框且无填充。

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