Еще один вариант закругления углов блоков

Закругленные углы блока популярнейшая вещь в современном веб-дизайне. Чтобы сотворить такое люди придумали довольно много способов. Вот один из них.

В HTML пишем:

<div id="round-div"> <span class="tan-bg"> <b class="r5"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b><b class="r1"></b> </span> <h3> Заголовок</h3> <div class="inner-box"> Здесь текст </div> <b class="r1"></b><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r5"></b> </div>

В CSS пишем:

<style> h3 { margin: 0 0 10px 0; } .r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10 { display: block; height: 1px; overflow: hidden; font-size:1px; } .r10 { margin: 0 10px; } .r9 { margin: 0 9px; } .r8 { margin: 0 8px; } .r7 { margin: 0 7px; } .r6 { margin: 0 6px; } .r5 { margin: 0 5px; } .r4 { margin: 0 4px; } .r3 { margin: 0 3px; } .r2 { margin: 0 2px; } .r1 { margin: 0 1px; } .inner-box {padding:0.7em 1em; } .inner-box { background-color: Antiquewhite; text-align : justify;} #round-div {width:400px; margin: 1em;} #round-div .tan-bg b, #round-div h3 {background-color: Tan; } #round-div h3 { padding:0.25em 0.75em 0.5em; margin-bottom:0; } #round-div .inner-box, #round-div b { background-color: Antiquewhite; </style>

Закругленные углы блока

Углы этого блока выглядят закругленными потому что я использовал свойства CSS, которые подглядел на одном из сайтов в Интернете, адрес которого давным давно утерян. Количество знаков, которые можно вставить в этот блок неограничено. То есть, это резиновый блок, его можно растянуть вдоль и поперек.

Работает во всех популярных браузерах.