Kulaté rohy

8. října 2006

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>

Předchozí článek digitalnipapir
Další článek poskytovatele.cz

Mohlo by vás také zajímat

Nejnovější

4 komentářů

  1. Catchamouse

    Říj 18, 2009 v 11:23

    Nefungují mi kulaté rohy, mám je hranaté.

    Odpovědět
  2. Jan Horak

    Říj 22, 2009 v 22:03

    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.

    Odpovědět
  3. Xsi

    Říj 29, 2009 v 10:08

    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
  4. Hibs

    Led 11, 2010 v 0:14

    Pro : Catchamouse . Máš je hranaté protože nemáš kul_roh1.gif stáhni si ho nahoře na !výsledek!

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *