U(X)HTML i CSS, mogu se postaviti kvadratne ivice oko delova strane, uglavnom to se radi inkorporiranjem koda za taj deo strane u <div>…</div> tagovima i dodavanjem ivice u <div> korišćenjem CSS border osobine.

Da ne bi sve bilo baš tako jednostavno, trenutno nije moguće napraviti ne-kvadratne ivice upotrebom samo (X)HTML i CSS (ne-kvadratne ivice ćemo zvati “zaobljene ivice”, iako ne moraju biti baš “zaobljene” nego mogu imati i neki drugi oblik).

Da bismo prevazišli nedostatak CSS-a u kreiranju zaobljenih ivica, možemo koristiti slike za njihov prikaz. Ovo je jednostavno ukoliko znate dimenije vašeg <div> - kreirate sliku sa određenim dimenzijama i postavite je za background tj. pozadinu. Ali, mi nećemo fiksne veličine na sajtu, nego želimo da elementi budu promenljivih dimenzija, u zavisnosti od sadržaja (širina, visina ili oboje). Ukoliko ne znamo kakav će sadržaj biti na strani ne možemo znati ni kolike će biti dimezije <div>.Osnovno u ovom uputstvu je kako kreirati zaobljene ivice koje su 'fluid' ili promenljive – to znači se one menjaju u zavisnosti od sadržaja.

Da bismo prevazišli navedeni problem, treba nam odvojene slike za dobijanje 4 ugla našeg zaobljenog boksa. Da bi smo ovo dobili, moramo biti sigurni da je box dovoljno velik. Da bismo ovo postigli nasu sliku ćemo postaviti u 4 layer-a, preklapajući jedan preko drugog da bismo dobili iluziju da je ivica neprekinuta.

Slika 1. Zaobljeni uglovi.

Proces je ilustrovan animacijom prikazanom gore. U svakom koraku poslednja slika ide na vrh.

- Prvo, velika slika ima levu i gornju ivicu i gornji levi zaobljeni ugao, pozicionirana u gornji levi ugao našeg <div> (zaokruženo crvenom bojom). Slika je veća nego što je potrebno zbog ilustracije ali se ona neće videti u praksi.

1. Sledeće je tanka slika koja sadrži donju ivicu i donji levi ugao koji se pozicionira dole levo u našem <div>, preko prve slike. I opet je veći od onog što nam je potrebno.
2. Treće tanka vertikalna slika koja sadrži desnu ivicu i gornji desni ugao se pozicionira u gornji desni ugao opet preko prethodne slike.
3. Konačno, kvadratna slika koja sadrži samo donji desni ugao se pozicionira u donji desni ugao.

Za implementaciju modula sa zaobljenim uglovima koristimo sledeće naredbe <jdoc />:

<jdoc:include type="modules" name="POSITION" style="rounded" />

Treba kreirati i sledeći kod:

<div class="module_menu">
  <div>
    <div>
      <div>
        <h3>Main Menu</h3>
        <ul class="menu">
          <li><!-- various menu items --></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Ova četiri ugnježdena <div>a daju nam lejere koji su nam potrebni za slike. Možemo upotrebiti “class name” spoljnjeg <div> da budemo sigurni da radimo sa pravim (tačno određenim) <div>-ovima, i onda upotrebiti ugnježdene odnose za primenu ispravne slike za svaki lejer. A sve to definisati u CSS-u na sledeći način:

div.module_menu {
  background: url(../images/rounded_topleft.png) 0 0 no-repeat;
  padding: 0;
}
 
div.module_menu div {
  background: url(../images/rounded_bottomleft.png) 0 100% no-repeat;
  margin: 0;
  border: 0;
}
 
div.module_menu div div{
  background: url(../images/rounded_topright.png) 100% 0 no-repeat;
}
 
div.module_menu div div div {
  background: url(../images/rounded_bottomright.png) 100% 100% no-repeat;
}

Padding, margine i border su potrebni da biste bili sigurni da se svaki <div> nastavlja na prethodni. treba voditi jos i računa da ako Module content sadrži <div> ova css pravila će se primeniti i na njega. Zato je potrebno dodati još jedno pravilo

div.module_menu div div div div{
  background: none;
}

“And that's it - happy coding!”