Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS split bar graph with solid border radius

CSS split bar graph with solid border radius

Problem

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:

40%
60%

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?

Problem courtesy of: keruilin

Solution

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/

Solution courtesy of: Frederick Behrends

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS split bar graph with solid border radius

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×