[CSS] 背景に依存しない画像やテーブルを使わない縁付き角丸ボックス

Web製作で、画像や表を使わずに角丸ボックスが必要となったため作ってみました。 角丸部分の外側は、透過という条件も満たしてみました。

---

縁付き角丸

ソースコードは、次の通り。

---

<style type="text/css">
  .rhfbody,.rhf div{background-color:#ffffee;}
  .rhfbody{color:black; border-left:1px solid #7f7f7f; border-right:1px solid #7f7f7f;}
  .rhf{font-size:0px;line-height:0px;}
  .rhfl1,.rhfl2,.rhfl3,.rhfl4{width:auto;}
  .rhfl1{margin:0px 5px; height: 1px; background-color: #7f7f7f !important;}
  .rhfl2{margin:0px 3px; height: 1px; border-left: 2px solid #7f7f7f; border-right: 2px solid #7f7f7f;}
  .rhfl3{margin:0px 2px; height: 1px; border-left: 1px solid #7f7f7f; border-right: 1px solid #7f7f7f;}
  .rhfl4{margin:0px 1px; height: 2px; border-left: 1px solid #7f7f7f; border-right: 1px solid #7f7f7f;}
</style>

<center>
  <div style="width: 50%;">
    <div class="rhf">
      <div class="rhfl1"><br></div><div class="rhfl2"><br></div>
      <div class="rhfl3"><br></div><div class="rhfl4"><br></div>
    </div>
    <div class="rhfbody">縁付き角丸</div>
    <div class="rhf">
      <div class="rhfl4"><br></div><div class="rhfl3"><br></div>
      <div class="rhfl2"><br></div><div class="rhfl1"><br></div>
    </div>
  </div>
</center>