Border-radius xassəsi

Xassə border-radius sərhəd və fon üçün yumruq kuncələr yaradır. Xassənin qiyməti kimi istənilən ölçü vahidləri istifadə edilə bilər. Standart qiymət: 0. Bu xassə aşağıdakı xassələr üçün qısadır: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sintaksis

selektor {
	border-radius: qiymet;
}

Qiymətlərin sayı

Xassə 1, 2, 3 və ya 4 sayda qiymət qəbul edə bilər, boşluqla ayrılır:

Say	Açıqlama
`1`	Butun kuncələr üçün eyni vaxtda.
`2`	Birinci qiymət yuxarı sağ və aşağı sol kuncələr üçün təyin edir, ikinci - yuxarı sol və aşağı sağ kuncələr üçün.
`3`	Birinci qiymət yuxarı sol kunc üçün təyin edir, ikinci - eyni vaxtda yuxarı sağ və aşağı sol kuncələr üçün, üçüncü isə - aşağı sağ kunc üçün.
`4`	Birinci qiymət yuxarı sol kunc üçün təyin edir, ikinci - yuxarı sağ kunc üçün, üçüncü - aşağı sağ kunc üçün, dördüncü isə - aşağı sol kunc üçün.

Elliptik yumruqlama

Kəsrik işarəsindən sonra iki qiymət elliptik yumruqlama təyin edir. Kəsrik işarəsindən əvvəlki qiymət üfüqi yumruqlamanı, kəsrik işarəsindən sonrakı qiymət isə şaquli yumruqlamanı göstərir:

selektor {
	border-radius: ufuqi / şaquli;
}

Əgər bir neçə kunc üçün yumruqlama təyin edilirsə, onda kəsrik işarəsindən əvvəl bütün üfüqi yumruqlamalar, ondan sonra isə bütün şaquli yumruqlamalar sadalanır.

Nümunə

Butun kuncələr üçün 10px yumruqlama təyin edək:

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

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

Nümunə

Nöqtəli sərhəd üçün yumruqlamanın necə göründüyünə baxaq:

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

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

Nümunə

Bir diaqonalın kuncələri üçün 10px yumruqlama, ikinci diaqonalın kuncələri üçün isə 40px yumruqlama təyin edək:

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

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

Nümunə

Yuxarı sol kunc üçün 10px yumruqlama, aşağı sağ kunc üçün 30px yumruqlama, ikinci diaqonalın kuncələri üçün isə 50px yumruqlama təyin edək:

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

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

Nümunə

Hər bir kunc üçün müxtəlif yumruqlamalar təyin edək:

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

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

Nümunə

Gəlin elliptik yumruqlama edək, yumruqlamanın üfüqi hissəsi üçün 20px, şaquli hissəsi üçün isə 40px təyin edək:

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

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

Nümunə

İndi isə hər bir kunc üçün ayrı-ayrılıqda müxtəlif elliptik yumruqlama təyin edək:

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

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

Nümunə

Əgər kvadrat blok üçün yumruqlama, kvadratın tərəfinin yarısına bərabər təyin edilərsə, onda çevrə alınar:

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

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

Nümunə

Əgər yumruqlama kvadratın tərəfindən böyük təyin edilərsə, yenə də çevrə alınar:

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

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

Nümunə

Çevrəni border-radius-i 50% təyin etməklə də almaq olar (üstünlük budur ki, kvadratın ölçüləri dəyişdikdə yumruqlamanı dəyişdirmək lazım gəlməz):

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

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

Nümunə

Əgər border-radius faizlə düzbucaqlı üçün təyin edilərsə, onda elliptik yumruqlama alınar. Əgər eni 400px, hündürlüyü 200px, border-radius isə 10% təyin edilibsə, bu 40px/20px yazılması ilə eynidir:

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

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

Nümunə

Düzbucaqlı üçün border-radius-i 50% təyin edək - ellips alınar:

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

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

Nümunə

border-radius xassəsi təkcə sərhədin kuncələrini deyil, həm də fonu yumruqlaşdırır:

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

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

Həmçinin bax

border xassəsi,
bu sərhəd üçün qısa xassədir