Do niedawna najpopularniejszym sposobem na zrobienie zaokrąglonych rogów na stronie było przygotowanie plików graficznych. W tej poradzie zobaczysz jak osiągnąć zaokrąglenie rogów przy pomocy stylów CSS.

<html>
<head>
<style type="text/css">
p{margin: 10px}

#blok{
margin: 10px;
background: yellow;
}

span.gora, span.dol{
display:block;
background: #ffffff
}

span.gora span, span.dol span{
display:block;height: 1px;
overflow: hidden; background: yellow;
}

span.r1{ margin: 0 5px; }
span.r2{ margin: 0 3px; }
span.r3{ margin: 0 2px; }
span.gora span.r4, span.dol span.r4{
margin: 0 1px;
height: 2px;
}
</style>
</head>

<body>
<div id="blok">
<span class="gora">
<span class="r1"></span>
<span class="r2"></span>
<span class="r3"></span>
<span class="r4"></span>
</span>

<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>

<span class="dol">
<span class="r4"></span>
<span class="r3"></span>
<span class="r2"></span>
<span class="r1"></span>
</span>
</div>
</body>
</html>

Efekt: zaokraglone_rogi_1.jpg