Элемент с закругленными углами R=3px ((( а надо R=5px

[ufalog]

<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



.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?

[real_kas]

<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>

<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>

[KaMiKadZe]

В CSS 3 будет все проще, уже для движка safari & firefox можно использовать
#rounded-box-3 {
-moz-border-radius: 5px;
-webkit-border-radius: 5px; }
После чего весь блок будет с закруглениями

[ffdown]

и когда ж оно будет?