PHP: <div id="rounded-box-3"> <b class="r3"></b><b class="r1"></b><b class="r1"></b> <div class="inner-box"> <h3>Элемент с закругленными углами R=3px</h3> <p>Этот способ закругления углов подсмотрен на GMail.</p> </div> <b class="r1"></b><b class="r1"></b><b class="r3"></b> </div> css PHP: .r1, .r2, .r3 { display: block; height: 1px; overflow: hidden; font-size:1px; } .r3 { margin: 0 3px; } .r2 { margin: 0 2px; } .r1 { margin: 0 1px; } #rounded-box-3 .inner-box, #rounded-box-3 b { background-color: #294d67; } .inner-box { padding:1em; } как увеличить радиус до 5 px?
HTML: <style>.r1, .r2, .r3, .r4, .r5{ display: block; overflow: hidden; font-size:1px; float: none; } .r5{ margin: 0 6px; height: 1px; background-color: #000;} .r4{ margin: 0 4px; height: 1px; border-right: 2px solid #000; border-left: 2px solid #000; background-color: #CCCCCC;} .r3{ margin: 0 3px; height: 1px; border-right: 1px solid #000; border-left: 1px solid #000; background-color: #CCCCCC;} .r2{ margin: 0 2px; height: 1px; border-right: 1px solid #000; border-left: 1px solid #000; background-color: #CCCCCC;} .r1{ margin: 0 1px; height: 2px; border-right: 1px solid #000; border-left: 1px solid #000; background-color: #CCCCCC;} .inner-box { padding:1em; border-right: 1px solid #000; border-left: 1px solid #000; background-color: #CCCCCC;}</style> HTML: <table> <tr> <td> <div id="rounded-box-5"> <i class="r5"></i> <i class="r3"></i> <i class="r2"></i> <i class="r1"></i> <i class="r1"></i> <div class="inner-box"> <table> <tr> <td> text </td> </tr> </table> </div> <i class="r1"></i> <i class="r1"></i> <i class="r2"></i> <i class="r3"></i> <i class="r5"></i> </div> </td> </tr> </table>
В CSS 3 будет все проще, уже для движка safari & firefox можно использовать PHP: #rounded-box-3 { -moz-border-radius: 5px; -webkit-border-radius: 5px; } После чего весь блок будет с закруглениями
