WEBnSTUDY.com
CSS

CSS zaobljeni uglovi

Jedna od "novijih" mogućnosti CSS-a je da uglovi elementa mogu biti zaobljeni. Možemo istovremeno zadati zaobljenje svih uglova, ili zaobliti samo jedan. Svaki ugao može biti zaobljen simetrično (kružno) ili asimetrično (elipsoidno).

border-radius Kompleksan atribut kojim se zadaje zaobljenje svih uglova
border-top-left-radius Zaobljenje gornjeg-levog ugla
border-top-right-radius Zaobljenje gornjeg-desnog ugla
border-bottom-right-radius Zaobljenje donjeg-desnog ugla
border-bottom-left-radius Zaobljenje donjeg-levog ugla

Za svaki ugao se može zadati po jedan ili dva radijusa. Ako zadamo jedan radijus, dobićemo "kružno" zaobljenje koje je simetrično i pohorizontali i vertikali. Ako zadamo dva radijusa, dobićemo "eliptično" zaobljenje koje se razlikuje po horizontali i vertikali.

border-radius

Kompleksan atribut kojim se istovremeno definiše veličina zaobljenja svih uglova. Dozvoljene vrednosti su:

Može se navesti jedna vrednost koja važi za sve uglove ili četiri vrednosti koje važe za gornji-levi, gornji-desni, donji-desni i donji-levi ugao. Ova dva načina se najčešće i koriste u praksi.

border-radius: [svi] border-radius: [tl] [tr] [br] [bl] border-radius: inherit
Redosled zadatih uglova kada zadajemo sve četiri vrednosti

Takođe možemo zadati dve vrednosti (prva za gornji-levi i donji-desni, druga za gornji-desni i donji-levi), ili čak tri vrednosti (prva za gornji-levi, druga za gornji-desni i donji-levi, treća za donji-desni).

border-radius: [tl_br] [tr_bl] border-radius: [tl] [tr_bl] [br]

Sve do sada smo opisivali kako da na različite načine zadamo kružna zaobljenja. Ako želimo da napravimo eliptično zaobljenje, drugi radijus dodajemo tako što posle kombinacije vrednosti za prvi radijus navedemo kosu crtu, pa ponovo kombinaciju vrednosti po istom pravilu.

border-radius: [vrednosti prvog radijusa] / [svi] border-radius: [vrednosti prvog radijusa] / [tl] [tr] [br] [bl] border-radius: [vrednosti prvog radijusa] / [tl_br] [tr_bl] border-radius: [vrednosti prvog radijusa] / [tl] [tr_bl] [br]

Pri tome prvi radijus predstavlja horizontalni, a drugi vertikalni deo zaobljenja.

Možda deluje malo komplikovano, ali u praksi ćemo uvek malo eksperimentisati dok ne dobijemo zadovoljavajuće rezultate.

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Ovo su atributi za definisanje zaobljenja pojedinačnih uglova. Dozvoljene vrednosti su:

I ovde je moguće navesti dve vrednosti - prvi (horizontalni) i drugi (vertikalni) radijus. Kod pojedinačnih atributa se ne koristi kosa crta.

atribut: [prvi radijus] atribut: [prvi radijus] [drugi radijus] atribut: inherit

Primer

Ovde imamo par primera kako se ovi atributi mogu zadati


  /* sva zaobljenja su veličine 15px */
  border-radius: 15px;
  
  /* 
    zaobljenje 20px/10px gore-levo i dole-desno i 
    zaobljenje 15px/10px gore-desno i dole-levo
  */
  border-radius: 20px 15px / 10px;
  
  /* zaobljenje se nasleđuje od nadređenog elementa */
  border-radius: inherit;
  
  /* zaobljenje svih uglova 10px, a samo gornjeg-levog 20px/5px */
  border-radius: 10px;
  border-top-left-radius: 20px 5px;
  
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies) radi vođenja interne statistike u cilju unapređenja korisničkog iskustva. Tako prikupljeni podaci su anonimni i nedostupni trećim licima. Vaša privatnost nije ugrožena ni na koji način.