Na stronie http://pro.html.it/esempio/nifty/ znalazłem ciekawe opisy jak zaokrąglać rogi pudełek stosując CSS, zamiast JavaScript.
Poniższe przykłady są adaptacją podanych na tych stronach przykładów do moich zastosowań:
Ramki mające zaokrąglone boki można wykonać w technice CSS.
Można je umieszczać na stronie na dwa sposoby:
* w pierwszym tekst jest umieszczony bezpośrednio w body i ramka obejmuje cały ekran (ramka pierwsza). Nadaje się to na logo strony.
* w drugim kod umieszczony jest wewnątrz pudełka o określonych rozmiarach (ramka druga).

W obu przypadkach kod w head ma postać:

.owal{
display:block;
}
.owal *{
display:block;
height:1px;
overflow:hidden;
background:#ABFFB6;
}
.owal1{
border-right:1px solid blue;
padding-right:1px;
margin-right:3px;
border-left:1px solid blue;
padding-left:1px;
margin-left:3px;
background:blue;
}
.owal2{
border-right:1px solid blue;
border-left:1px solid blue;
padding:0px 1px;
background:blue;
margin:0px 1px;
}
.owal3{
border-right:1px solid blue;
border-left:1px solid blue;
margin:0px 1px;
}
.owal4{
border-right:1px solid blue;
border-left:1px solid blue;
}
.owal5{
border-right:1px solid blue;
border-left:1px solid blue;
}
.tekst{
padding:10px 5px;
background:#ABFFB6;
}

Kod w body ma postać:

<div>
<b class="owal">
<b class="owal1"></b>
<b class="owal2"></b>
<b class="owal3"></b>
<b class="owal4"></b>
<b class="owal5"></b>
</b>
<div class="tekst">Tutaj należy wstawić tekst...</div>
<b class="owal">
<b class="owal5"></b>
<b class="owal4"></b>
<b class="owal3"></b>
<b class="owal2"></b>
<b class="owal1"></b>
</b>
</div>

Powyższy kod z body można umieścić np. w pudełku o nazwie ramka i szerokości 30% lub w klasycznej tabeli.
Efekt tego można zobaczyć poniej:

Tekst w tej ramce jest zawarty w pudeku o szerokoci 30% szerokoci ekranu. Dobierając ten sam kod koloru w kodzie head, uzyskamy pudełko, w którym wszystkie boki i wypełnienie są tego samego koloru

Można też zmodyfikować kod w body do postaci:

<div>
<b class="owal">
<b class="owal1"><b></b></b>
<b class="owal2"><b></b></b>
<b class="owal3"></b>
<b class="owal4"></b>
<b class="owal5"></b>
</b>
<div class="tekst">Tutaj należy wstawić tekst...</div>
<b class="owal">
<b class="owal5"></b>
<b class="owal4"></b>
<b class="owal3"></b>
<b class="owal2"><b></b></b>
<b class="owal1"><b></b></b>
</b>
</div>

Da to efekt w postaci jednokolorowego pudełka z niebieskimi rogami:

Tekst w tej ramce jest zawarty w pudełku o szerokoci 30% szerokoci ekranu. Dobierając ten sam kod koloru w kodzie head, uzyskamy pudełko, w którym wszystkie boki i wypełnienie są tego samego koloru

do góry