box-shadow border

Fancy border with inset box shadow on complex content

by larsolesimonsen

HTML

<div style="position: relative; top: 3em;">
    <div class="range-border"></div>
    <div class="range-container">
        <div class="range first" style="width: 20%; background-color: red;"></div>
        <div class="range" style="width: 30%; background-color: blue;"></div>
        <div class="range" style="width: 10%; background-color: green;"></div>
        <div class="range last" style="width: 40%; background-color: orange;"></div>
    </div>
</div>

CSS

/* [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#*/
.range-border {
    position: absolute;
    height: .8em;
    width: 100%;
    box-shadow: inset 1px 1px 5px 0px #555;
    border-radius: .5em;
    background-color: transparent;
    z-index: 1;
}

.range-container {
    height: .8em;
    width: 100%;
    position: absolute;
}

.range {
    height: .8em;
    float: left;
    opacity: .8;
}

.first { border-radius: .5em 0 0 .5em; }
.last { border-radius: 0 .5em .5em 0; }