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:
- [metrika] - npr. 10px, 1em...
- [procenat] - relativna vrednost u onosu na širinu i visinu elementa
- inherit - sve vrednosti border-radiusa se nasleđuju od nadređenog elementa
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
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:
- [metrika] - npr. 10px, 1em...
- [procenat] - relativna vrednost u onosu na širinu i visinu elementa
- inherit - sve vrednosti border-radiusa se nasleđuju od nadređenog elementa
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;
Pogledajte i primer sa različitim podešavanjima zaobljenih uglova.