Colturi rotunjite CSS

Cred ca cel mai usor mod de a intelege cum se realizeaza un chenar cu colturi rotunjite este sa va construiesc eu un exemplu dupa care voi sa il personalizati dupa cum doriti.

Un exemplu de chenar cu colturi rotunjite

  

Codeul CSS

<style type="text/css">
.chenar{display:block}
.chenar *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#08D119}
.chenar1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #66e26d;
  border-right:1px solid #66e26d;
  background:#31d83e}
.chenar2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #9cec9e;
  border-right:1px solid #9cec9e;
  background:#27d635}
.chenar3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #27d635;
  border-right:1px solid #27d635;}
.chenar4{
  border-left:1px solid #66e26d;
  border-right:1px solid #66e26d}
.chenar5{
  border-left:1px solid #31d83e;
  border-right:1px solid #31d83e}
.chenarfg{
  background:#08D119}
</style>

Codul HTML

in tagurile body

<b class="chenar">
  <b class="chenar1"><b></b></b>
  <b class="chenar2"><b></b></b>
  <b class="chenar3"></b>
  <b class="chenar4"></b>
  <b class="chenar5"></b></b><div class="chenarfg">
  <!-- content goes here -->
 Tutoriale Ana Design<br/>
 Tutoriale CSS<br/>
 Tutoriale web design<br/>
 Invata CSS din exemple. Totul despre CSS
  </div>

<b class="chenar">
  <b class="chenar5"></b>
  <b class="chenar4"></b>
  <b class="chenar3"></b>
  <b class="chenar2"><b></b></b>
  <b class="chenar1"><b></b></b></b>
</div>