Zaobljeni rubovi sa CSS-om

Danas je nemoguće napraviti tekstualni okvir sa zaobljenim rubovima upotrebljavajući samo HTML. Ovdje ćemo vidjeti upotrebu CSS-a i nekoliko slika da bismo dobili tekstualne okvire sa zaobljenim rubovima. Prednost je ta što se ovako dizajniran okvir sam prilagođava količini teksta te rubovi uvijek ostaju zaobljeni. Pa krenimo redom.


Prvo napravimo tekstualni okvir pomoću div elementa:

<div class="gl">
Proba tekst okvira i zapisa.
</div>

Proba tekst okvira i zapisa.



Sada napravimo četiri slike. Slike ustvari predstavljaju četvrtine punog kruga. Isjecimo ih i sačuvajmo:

Sada imamo slike i samo ih trebamo rasporediti na četiri kuta našeg tekstualnog okvira:




<style type="text/css">
.gl {background: url(gl.gif) 0 0 no-repeat; width: 200px}
.gd {background: url(gd.gif) 100% 0% no-repeat; width: 200px}
.dl {background: url(dl.gif) 0 100% no-repeat; width: 200px}
.dd {background: url(dd.gif) 100% 100% no-repeat; width: 200px;}
</style>

<div class="gl"><div class="gd"><div class="dl"><div class="dd">
<div style="padding:10px">
Proba tekst okvira i zapisa.
</div>
</div></div></div></div>

Ovako smo dodijelili rubove našem tekst okviru. U zadnjem div elementu, dd, smo dodijelili padding vrijednost koja je malo veća od dužine i širine slika kutova. Tako se neće dogoditi da se tekst ispisuje preko ovih slika, a i ljepše će izgledati. Još moramo dodijeliti background-color vrijednost. Ovu vrijednost dodjeljujemo prvom elementu. Na kraju imamo ovaj kod:




<style type="text/css">
.gl {background: url(gl.gif) 0 0 #9ac80d no-repeat; width: 200px;}
.gd {background: url(gd.gif) 100% 0% no-repeat; width: 200px}
.dl {background: url(dl.gif) 0 100% no-repeat; width: 200px}
.dd {background: url(dd.gif) 100% 100% no-repeat; width: 200px}
</style>

<div class="gl"><div class="gd"><div class="dl"><div class="dd">
<div style="padding:20px">
Proba tekst okvira i zapisa.
</div>
</div></div></div></div>