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

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

После чего весь блок будет с закруглениями

 

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