Svojstvo border-radius

Svojstvo border-radius kreira zaobljene uglove za okvir i pozadinu. Vrednošću svojstva služe bilo koje jedinice za veličine. Podrazumevana vrednost: 0. Predstavlja skraćenicu za svojstva border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sintaksa

selektor {
	border-radius: vrednost;
}

Broj vrednosti

Svojstvo može da prihvati 1, 2, 3 ili 4 vrednosti, navedene razmakom:

Broj	Opis
`1`	Za sve uglove istovremeno.
`2`	Prva vrednost zadaje zaobljenje za gornji desni i donji levi ugao, druga - za gornji levi i donji desni.
`3`	Prva vrednost zadaje zaobljenje za gornji levi ugao, druga - istovremeno za gornji desni i donji levi, a treća - za donji desni ugao.
`4`	Prva vrednost zadaje zaobljenje za gornji levi ugao, druga - za gornji desni, treća - za donji desni ugao, a četvrta - za donji levi ugao.

Eliptičko zaobljenje

Dve vrednosti kroz kosu crtu postavljaju eliptičko zaobljenje. Vrednost pre kose crte označava horizontalno zaobljenje, a vrednost posle kose crte - vertikalno:

selektor {
	border-radius: horizontalno / vertikalno;
}

Ako se zadaju zaobljenja za više uglova, onda se pre kose crte navode sva horizontalna zaobljenja, a posle nje - sva vertikalna.

Primer

Postavimo zaobljenje od 10px za sve uglove:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Primer

Pogledajmo kako izgleda zaobljenje okvira u obliku tačkica:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px dotted black;
	width: 300px;
	height: 100px;
}

Primer

Postavimo zaobljenje od 10px za uglove jedne dijagonale, i zaobljenje od 40px - za uglove druge dijagonale:

<div id="elem"></div>

#elem {
	border-radius: 10px 40px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Primer

Postavimo zaobljenje od 10px za gornji levi ugao, zaobljenje od 30px za donji desni ugao, i zaobljenje od 50px - za uglove druge dijagonale:

<div id="elem"></div>

#elem {
	border-radius: 10px 50px 30px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Primer

Postavimo različita zaobljenja za svaki od uglova:

<div id="elem"></div>

#elem {
	border-radius: 10px 30px 50px 70px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Primer

Hajde da napravimo eliptičko zaobljenje, postavivši 20px za horizontalni deo zaobljenja, a 40px - za vertikalni:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px / 40px;
	width: 300px;
	height: 100px;
}

Primer

A sada postavimo različito eliptičko zaobljenje za sve uglove pojedinačno:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
	width: 300px;
	height: 100px;
}

Primer

Ako za kvadratni blok postavimo zaobljenje jednako polovini stranice kvadrata, dobićemo krug:

<div id="elem"></div>

#elem {
	border-radius: 100px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Primer

Ako postavimo zaobljenje, veće od stranice kvadrata, opet ćemo dobiti krug:

<div id="elem"></div>

#elem {
	border-radius: 200px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Primer

Krug takođe možemo dobiti, ako postavimo border-radius na 50% (prednost je u tome što pri promeni dimenzija kvadrata nećemo morati da menjamo zaobljenje):

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 50%;
	width: 200px;
	height: 200px;
}

Primer

Ako postavimo border-radius u procentima za pravougaonik, dobićemo eliptičko zaobljenje. Ako je širina data u 400px, visina u 200px, a border-radius na 10%, onda je to isto, kao da je napisano 40px/20px:

<div id="elem"></div>

#elem {
	border-radius: 10%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Primer

Postavimo vrednost border-radius na 50% za pravougaonik - dobićemo elipsu:

<div id="elem"></div>

#elem {
	border-radius: 50%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Primer

Svojstvo border-radius zaokružuje ne samo uglove okvira, već i pozadine:

<div id="elem"></div>

#elem {
	border-radius: 20px;
	width: 300px;
	height: 100px;
	background-color: #e4f1ed;
}

Vidite takođe

svojstvo border,
koje predstavlja skraćeno svojstvo za okvir