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

[ufaclub]

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

 

[t3s]

поскольку скругление делается блоками уменьшенной ширины, просто увеличьте кол-во блоков, примерно так:

.r1, .r2, .r3, .r4, .r5 {
    display: block;
    height: 1px;
    overflow: hidden; 
    font-size:1px;
}
 
.r5 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }

 

[ufaclub]

поскольку скругление делается блоками уменьшенной ширины, просто увеличьте кол-во блоков, примерно так:

.r1, .r2, .r3, .r4, .r5 {
    display: block;
    height: 1px;
    overflow: hidden; 
    font-size:1px;
}
.r5 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }

походу надо еше чет изменить в выводе? потому что изменик css ничего не измненилось....

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

 

[t3s]

ну разумеется
выше и ниже нужного блока ставьте необходимое кол-во

<b class="r*">

вместо звездочки - номер нужного класса
поэксперементируйте, кроме круглых углов можно добиться занимательных эффектов - например "вогнутые" углы или блоки бочкообразной формы...