Border for scroll

by Bacher

HTML

<div class="container">
    <div class="inner">
        <p class="article">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
        <p class="article">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
        <p class="article">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
        <p class="article">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
    </div>
</div>

CSS

.container {
    width: 300px;
    background:
        -webkit-radial-gradient(
            50% 0, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0))
        0 0 no-repeat,
        -webkit-radial-gradient(
            50% 100%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0))
        0 100% no-repeat;
    -webkit-background-size: 100% 10px
}

.inner {
    overflow: auto;
    max-height: 200px;
}

.inner:before, .inner:after {
    content: '';
    display: block;
    height: 10px;
    width: 100%;
    background: white;
    z-index: -1;
}

.inner:after {
    margin-top: -10px
}