Proprietatea border-radius

Proprietatea border-radius creează colțuri rotunjite pentru bordură și fundal. Valoarea proprietății poate fi orice unitate de măsură pentru dimensiuni. Valoarea implicită: 0. Este o prescurtare pentru proprietățile border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sintaxă

selector {
	border-radius: valoare;
}

Numărul de valori

Proprietatea poate accepta 1, 2, 3 sau 4 valori, specificate separate prin spațiu:

Număr	Descriere
`1`	Pentru toate colțurile simultan.
`2`	Prima valoare stabilește rotunjirea pentru colțul din dreapta-sus și din stânga-jos, a doua - pentru colțul din stânga-sus și din dreapta-jos.
`3`	Prima valoare stabilește rotunjirea pentru colțul din stânga-sus, a doua - simultan pentru colțul din dreapta-sus și din stânga-jos, iar a treia - pentru colțul din dreapta-jos.
`4`	Prima valoare stabilește rotunjirea pentru colțul din stânga-sus, a doua - pentru colțul din dreapta-sus, a treia - pentru colțul din dreapta-jos, iar a patra - pentru colțul din stânga-jos.

Rotunjire eliptică

Două valori separate prin bara oblică stabilesc o rotunjire eliptică. Valoarea dinaintea barei oblice indică rotunjirea orizontală, iar valoarea de după bara oblică - rotunjirea verticală:

selector {
	border-radius: orizontal / vertical;
}

Dacă se specifică rotunjiri pentru mai multe colțuri, atunci înaintea barei oblice se enumeră toate rotunjirile orizontale, iar după ea - toate rotunjirile verticale.

Exemplu

Să stabilim o rotunjire de 10px pentru toate colțurile:

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

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

Exemplu

Să vedem cum arată rotunjirea pentru o bordură sub formă de puncte:

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

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

Exemplu

Să stabilim o rotunjire de 10px pentru colțurile unei diagonale și o rotunjire de 40px - pentru colțurile celeilalte diagonale:

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

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

Exemplu

Să stabilim o rotunjire de 10px pentru colțul din stânga-sus, o rotunjire de 30px pentru colțul din dreapta-jos și rotunjiri de 50px - pentru colțurile celeilalte diagonale:

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

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

Exemplu

Să stabilim rotunjiri diferite pentru fiecare dintre colțuri:

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

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

Exemplu

Să facem o rotunjire eliptică, stabilind 20px pentru partea orizontală a rotunjirii și 40px - pentru partea verticală:

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

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

Exemplu

Acum să stabilim rotunjiri eliptice diferite pentru toate colțurile, fiecare în parte:

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

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

Exemplu

Dacă pentru un bloc pătrat se stabilește o rotunjire egală cu jumătate din latura pătratului, se va obține un cerc:

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

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

Exemplu

Dacă se stabilește o rotunjire mai mare decât latura pătratului, se va obține tot un cerc:

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

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

Exemplu

Un cerc poate fi obținut și prin stabilirea border-radius la 50% (avantajul constă în faptul că la modificarea dimensiunilor pătratului nu va fi necesară schimbarea rotunjirii):

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

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

Exemplu

Dacă se stabilește border-radius în procente pentru un dreptunghi, se va obține o rotunjire eliptică. Dacă lățimea este stabilită la 400px, înălțimea la 200px, iar border-radius la 10%, atunci este echivalent cu a scrie 40px/20px:

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

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

Exemplu

Să stabilim valoarea border-radius la 50% pentru un dreptunghi - se va obține un elips:

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

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

Exemplu

Proprietatea border-radius rotunjește nu numai colțurile bordurii, ci și ale fundalului:

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

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

Vezi și

proprietatea border,
care este o proprietate-prescurtare pentru bordură