Toto řešení ukazuje, jak pomocí kkaskádových stylů vytvořit efektní kulaté rohy okrajů u různých elementů. Výhodou tohoto řešení oproti jiným postupům je, že využívá jen jednoho obrázku a velmi jednoduchý XHTML kód.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Petr Novák. Bližší popis najdete v článku Kulaté rohy v blokových elementech.

CSS

#obal-kul-roh
{
position:relative;
width:200px;
height:100%;
margin:10px;
padding:.5em;
font-size:.76em;
color:#000;
background:#e4effa;
border-top:15px solid #a0d9ff;
border-bottom:15px solid #a0d9ff;
border-left:15px solid #a0d9ff;
border-right:15px solid #a0d9ff;
text-align:left;
}
.horlev
{
position:absolute;
top:-15px;
left:-15px;
background:url(‚kul_roh1.gif‘) left top no-repeat #fff;
}
.horprav
{
position:absolute;
top:-15px;
right:-15px;
background:url(‚kul_roh1.gif‘) right top no-repeat #fff;
}
.dollev
{
position:absolute;
bottom:-15px;
left:-15px;
background:url(‚kul_roh1.gif‘) left bottom no-repeat #fff;
}
.dolprav
{
position:absolute;
bottom:-15px;
right:-15px;
background:url(‚kul_roh1.gif‘) right bottom no-repeat #fff;
}
.horlev, .horprav, .dollev, .dolprav
{
width:15px;
height:15px;
font-size:0px;
}

XHTML

<html>
<body>
<div id=“obal-kul-roh“>
<div class=“horlev“></div><div class=“horprav“></div><div class=“dollev“></div><div class=“dolprav“></div>
<p>Lorem ipsum dolor sit amet…</p>
</div>
</body>
</html>

4 Příspěvků v diskuzi

  1. Na své stránce jsem vytvořil generátor pro HTML a CSS boxů s nejen kulatými rohy http://www.wild-web.eu/css-box-generator/

    Soustředil sem se na obecnost, jde tam vložit jakýkoliv obrázek a nastavit nějaké možnosti generování. K dispozici je i galerie vytvořených boxů.

    Využívejte, jak je libo, koukejte, jak jsem to vyřešil, hlavně mě netlučte.

  2. Hehe díky. Už vím co mě vždy chybělo pro ie6. Definovat font-size: 0px; :D
    To by mě nenapadlo, ani dyby mě na nože brali…

Odpovědět