Prava nadloga v oblikovanju div blokov so zaokroženi robovi. Vsak brskalnik zahteva svoje nastavitve. Denimo, da želim izrisati preprost div blok razreda div-blok z robom radija 4px. Da bi nalogo rešil s pripravljenimi fancy css rešitvami, lahko nad blokom uporabim
.div-blok{
border: 1 px solid black /* Izrišem črn rob okoli bloka div */
-moz-border-radius: 4px; /* Firefox */
-webkit-border-radius: 4px; /* Safari in Google Chrome */
border-radius: 4px; /* Opera 10.5+, bodoči brskalniki, in tudi Internet Explorer 6+, ki uporablja IE-CSS3 */
}Takoj naletim na problem IE brskalnikov, ki uporabljajo CSS2. Zaokroženi robovi odpadejo. Na strani http://fetchak.com/ie-css3/ sicer najdemo lepo rešitev, ki pa zna biti v več gnezdenih div blokih težavna. Na strani, kjer uporabim zaokrožen div blok, namreč najpogosteje uporabim več zaokroženih elementov (gumbi, menu, bloki za naslov, telo članka, stranski menu, komentarji, noga,… ). Stvar postane tečna, tudi z-indeksi morajo biti usklajeni in se hitro tepejo s kakšnimi vtičniki za prikaz galerij, ipd.
Rešitev je seveda na dlani – div bloki, ki uporabijo za robove slike. Toda: to lahko preide v pretirano zapravljanje časa. Naknadno prilagojevanje barv še posebej, ko je treba uskaditi vse elemente na strani in je vsak izmed njih sestavljen iz več slik.
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Funkcionalen div blok z robovi brez slik <div id="div-blok"><strong class="div-blok-zgoraj"> </strong> <div class="div-blok-vsebina"> <h2>Zaokroženi robovi div bloka</h2> Pred vami je css div blok z zaokroženimi robovi brez uporabe slik, funkcionalen v vseh brskalnikih. </div> <strong class="div-blok-spodaj"> </strong> </div>