Rounded Corner 1px - after-before

by marakoss

HTML

<div class="rounded-corner-1">
Tento zaobleny div se roztahuje dle delky textu.
    
Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

html, body{
    background: #444;
}

.rounded-corner-1 {
    display: inline-block;
    background: #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}

.rounded-corner-1:before{
    border-top: 1px solid #fff;
    padding-top: 1px;
    display: block;
    content: " ";
    position: relative;
    top: -1px;
}

.rounded-corner-1:after{
    border-bottom: 1px solid #fff;
    padding-bottom: 1px;
    display: block;
    content: " ";
    position: relative;
    top: 1px;
}