HTML、CSSのみで丸型枠の作成

こんなサイトを見つけたので、試しにやってみたｗ

sample.html

<div style="background-color: #000000;width: 224px;">
    <div class="rtop">
        <div class="r1"></div>
        <div class="r2"></div>
        <div class="r3"></div>
        <div class="r4"></div>
        <div class="r4"></div>
    </div>
    <div style="width: 100%; text-align: center;color: #FFFFFF;">
        SAMPLE
    </div>
    <div class="rbottom">
        <div class="r4"></div>
        <div class="r4"></div>
        <div class="r3"></div>
        <div class="r2"></div>
        <div class="r1"></div>
    </div>
</div>

sample.css

div.rtop {
    height: 5px;
    width: 100%;
    font-size:1px;
}
div.rbottom {
    height: 5px;
    width: 100%;
    font-size:1px;
    background: #FFFFFF;
}
div.rtop *,div.rbottom * {
    height: 1px;
    font-size:1px;
    background: #000000;
}
div.r1 {
    margin-left: 5px;
    margin-right: 5px;
}
div.r2 {
    margin-left: 3px;
    margin-right: 3px;
}
div.r3 {
    margin-left: 2px;
    margin-right: 2px;
}
div.r4 {
    margin-left: 1px;
    margin-right: 1px;
}