Īpašība border-radius

Īpašība border-radius izveido noapaļotus stūrus apmales un fona elementiem. Īpašības vērtība var būt jebkura mērvienība izmēriem. Noklusējuma vērtība: 0. Tas ir saīsinājums īpašībām border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sintakse

selektors {
	border-radius: vērtība;
}

Vērtību skaits

Īpašība var pieņemt 1, 2, 3 vai 4 vērtības, kas norādītas atdalītas ar atstarpēm:

Skaits	Apraksts
`1`	Visiem stūriem vienlaikus.
`2`	Pirmā vērtība nosaka noapaļošanu augšējam labajam un apakšējam kreisajam stūrim, otrā - augšējam kreisajam un apakšējam labajam.
`3`	Pirmā vērtība nosaka noapaļošanu augšējam kreisajam stūrim, otrā - vienlaikus augšējam labajam un apakšējam kreisajam, un trešā - apakšējam labajam stūrim.
`4`	Pirmā vērtība nosaka noapaļošanu augšējam kreisajam stūrim, otrā - augšējam labajam, trešā - apakšējam labajam stūrim, un ceturtā - apakšējam kreisajam stūrim.

Eliptiska noapaļošana

Divas vērtības ar slīpsvītru nosaka eliptisku noapaļošanu. Vērtība pirms slīpsvītras norāda horizontālo noapaļošanu, un vērtība aiz slīpsvītras - vertikālo noapaļošanu:

selektors {
	border-radius: horizontālā / vertikālā;
}

Ja tiek norādītas noapaļošanas vairākiem stūriem, tad pirms slīpsvītras tiek uzskaitītas visas horizontālās noapaļošanas, bet aiz tās - visas vertikālās.

Piemērs

Uzstādīsim noapaļošanu 10px visiem stūriem:

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

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

Piemērs

Apskatīsim, kā izskatās noapaļošana apmalei punktu veidā:

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

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

Piemērs

Uzstādīsim noapaļošanu 10px vienas diagonāles stūriem, un noapaļošanu 40px - otras diagonāles stūriem:

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

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

Piemērs

Uzstādīsim noapaļošanu 10px augšējam kreisajam stūrim, noapaļošanu 30px apakšējam labajam stūrim, un noapaļošanu 50px - otras diagonāles stūriem:

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

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

Piemērs

Uzstādīsim dažādas noapaļošanas katram stūrim:

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

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

Piemērs

Izveidosim eliptisku noapaļošanu, uzstādot 20px horizontālajai noapaļošanas daļai, un 40px - vertikālajai:

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

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

Piemērs

Tagad uzstādīsim atšķirīgu eliptisku noapaļošanu katram stūrim atsevišķi:

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

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

Piemērs

Ja kvadrātveida elementam uzstāda noapaļošanu, kas vienāda ar pusi no kvadrāta malas, tad iegūst apli:

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

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

Piemērs

Ja uzstāda noapaļošanu, kas lielāka par kvadrāta malu, tad tik un tā iegūst apli:

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

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

Piemērs

Apli var iegūt arī, ja uzstāda border-radius uz 50% (priekšrocība ir tā, ka, mainot kvadrāta izmērus, nav jāmaina noapaļošana):

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

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

Piemērs

Ja uzstāda border-radius procentos taisnstūrim, tad iegūst eliptisku noapaļošanu. Ja platums ir 400px, augstums 200px, un border-radius 10%, tad tas ir līdzvērtīgi 40px/20px:

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

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

Piemērs

Uzstādīsim vērtību border-radius uz 50% taisnstūrim - iegūsim elipsi:

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

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

Piemērs

Īpašība border-radius noapaļo ne tikai apmales stūrus, bet arī fona:

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

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

Skatiet arī

īpašība border,
kas ir īpašības-saīsinājums apmalei