Savybė border-radius

Savybė border-radius sukuria apvalius kampus sienai ir fonui. Savybės reikšmė gali būti bet kokie dydžio vienetai. Numatytoji reikšmė: 0. Tai yra sutrumpinimas savybėms border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sintaksė

selektorius {
	border-radius: reikšmė;
}

Reikšmių skaičius

Savybė gali priimti 1, 2, 3 arba 4 reikšmes, nurodomas per tarpą:

Skaičius	Aprašas
`1`	Visiems kampams vienu metu.
`2`	Pirmoji reikšmė nustato apvalinimą viršutiniam dešiniajam ir apatiniam kairiajam kampams, antroji - viršutiniam kairiajam ir apatiniam dešiniajam.
`3`	Pirmoji reikšmė nustato apvalinimą viršutiniam kairiajam kampui, antroji - vienu metu viršutiniam dešiniajam ir apatiniam kairiajam, o trečioji - apatiniam dešiniajam kampui.
`4`	Pirmoji reikšmė nustato apvalinimą viršutiniam kairiajam kampui, antroji - viršutiniam dešiniajam, trečioji - apatiniam dešiniajam kampui, o ketvirtoji - apatiniam kairiajam kampui.

Eliptinis apvalinimas

Dvi reikšmės per pasvirąjį brūkšnį nustato eliptinį apvalinimą. Reikšmė prieš pasvirąjį brūkšnį nurodo horizontalų apvalinimą, o reikšmės po pasvirojo brūkšnio - vertikalų:

selektorius {
	border-radius: horizontalus / vertikalus;
}

Jei nustatomas apvalinimas keliems kampams, tai prieš pasvirąjį brūkšnį išvardijami visi horizontalūs apvalinimai, o po jo - visi vertikalūs.

Pavyzdys

Nustatykime 10px apvalinimą visiems kampams:

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

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

Pavyzdys

Pažiūrėkime, kaip atrodo apvalinimai sienai taškų pavidalu:

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

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

Pavyzdys

Nustatykime 10px apvalinimą vienos įstrižainės kampams, o 40px apvalinimą - antros įstrižainės kampams:

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

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

Pavyzdys

Nustatykime 10px apvalinimą viršutiniam kairiajam kampui, 30px apvalinimą apatiniam dešiniajam kampui, o 50px apvalinimą - antros įstrižainės kampams:

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

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

Pavyzdys

Nustatykime skirtingus apvalinimus kiekvienam iš kampų:

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

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

Pavyzdys

Sukurkime eliptinį apvalinimą, nustatydami 20px horizontaliai apvalinimo daliai, o 40px - vertikaliai:

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

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

Pavyzdys

Dabar nustatykime skirtingą eliptinį apvalinimą visiems kampams atskirai:

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

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

Pavyzdys

Jei kvadratiniam blokui nustatyti apvalinimą, lygų pusei kvadrato kraštinės, gausite apskritimą:

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

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

Pavyzdys

Jei nustatytumėte apvalinimą, didesnį nei kvadrato kraštinė, vis tiek gautumėte apskritimą:

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

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

Pavyzdys

Apskritimą taip pat galima gauti, jei nustatytumėte border-radius į 50% (pranašumas tas, kad keičiant kvadrato dydžius nereikės keisti apvalinimo):

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

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

Pavyzdys

Jei nustatytumėte border-radius procentais stačiakampiui, gautumėte eliptinį apvalinimą. Jei plotis nustatytas 400px, aukštis 200px, o border-radius 10%, tai tas pats, kaip jei būtų parašyta 40px/20px:

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

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

Pavyzdys

Nustatykime reikšmę border-radius į 50% stačiakampiui - gausite elipsę:

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

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

Pavyzdys

Savybė border-radius apvalina ne tik sienos kampus, bet ir fono:

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

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

Taip pat žiūrėkite

savybė border,
kuri yra sutrumpinimo savybė sienai