CSS-Snippet: Runde Ecken ohne Images

.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {padding: 15px;}

<div class="b1f"></div><div class="b2f"></div><div class="b3f"></div><div class="b4f"></div>
<div class="contentf">
  <div>box-content goes here ...</div>
</div>
<div class="b4f"></div><div class="b3f"></div><div class="b2f"></div><div class="b1f"></div>

.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;}
.b1 {height:1px; background:#888; margin:0 5px;}
.b2 {height:1px; background:#fff; border-right:2px solid #888; border-left:2px solid #888; margin:0 3px;}
.b3 {height:1px; background:#fff; border-right:1px solid #888; border-left:1px solid #888; margin:0 2px;}
.b4 {height:2px; background:#fff; border-right:1px solid #888; border-left:1px solid #888; margin:0 1px;}
.contentb {background: #fff; border-right:1px solid #888; border-left:1px solid #888;}
.contentb div {padding: 15px;}

<div class="b1"></div><div class="b2"></div><div class="b3"></div><div class="b4"></div>
<div class="contentb">
  <div>box-content goes here ...</div>
</div>
<div class="b4"></div><div class="b3"></div><div class="b2"></div><div class="b1"></div>