Prostym sposobem na zaokrąglenie rogów pudełek jest sposób niżej opisany, który pozwala uzyskać większe krzywizny:

Tutaj wstawiamy interesujący nas tekst
lub linki,
lub obrazki,
lub grafikę i media...

Kod w head lub w style.css ma postać:
.w {
display:block;
}
.w * {
display:block;
overflow:hidden;
background-color:orange;
}
.w1 {
margin:0px 11px 0px 11px;
}
.w2 {
margin:0px 6px 0px 6px;
height:1px;
}
.w3 {
margin:0px 4px 0px 4px;
height:1px;
}
.w4 {
margin:0px 2px 0px 2px;
height:2px;
}
.w5 {
margin:0px 1px;
height:3px;
}
.w6 {
height:4px;
}
.tekst {
background-color:orange;
padding:2% 2% 2% 2%;
font-weight:normal;
}

Kod w body ma postać:
<strong class="w">
<strong class="w1"></strong>
<strong class="w2"></strong>
<strong class="w3"></strong>
<strong class="w4"></strong>
<strong class="w5"></strong>
<strong class="w6"></strong>
</strong>

<div class="tekst">
Tutaj wstawiamy interesujący nas tekst<br />
lub linki,<br />
lub obrazki,<br />
lub grafikę i media...<br />
</div>

<strong class="w">
<strong class="w6"></strong>
<strong class="w5"></strong>
<strong class="w4"></strong>
<strong class="w3"></strong>
<sprong class="w2"></sprong>
<strong class="w1"></strong>
</strong>

Powyższy sposób wstawiania zaokrągleń ma jedną wadę w stosunku do łuków składanych ze zdjęć. Są to nierówne krawędzie i dlatego krzywizna ma ograniczone rozmiary.


W sieci są dostępne podobne opisy.
do góry