Border-radius xususiyati

border-radius xususiyati chegaralar va fon uchun yumaloq burchaklar yaratadi. Xususiyat qiymati har qanday o‘lchov birliklari bo‘lishi mumkin. Standart qiymati: 0. Bu xususiyat quyidagi xususiyatlar uchun qisqartma hisoblanadi: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sintaksis

selector {
	border-radius: qiymat;
}

Qiymatlar soni

Xususiyat 1, 2, 3 yoki 4 ta qiymatni qabul qilishi mumkin, ular probel orqali ko‘rsatiladi:

Soni	Tavsif
`1`	Barcha burchaklar uchun bir vaqtning o'zida.
`2`	Birinchi qiymat yuqori o‘ng va pastki chap burchaklar uchun yumaloqlikni belgilaydi, ikkinchisi - yuqori chap va pastki o‘ng burchaklar uchun.
`3`	Birinchi qiymat yuqori chap burchak uchun yumaloqlikni belgilaydi, ikkinchisi - bir vaqtning o'zida yuqori o‘ng va pastki chap burchaklar uchun, uchinchisi - pastki o‘ng burchak uchun.
`4`	Birinchi qiymat yuqori chap burchak uchun yumaloqlikni belgilaydi, ikkinchisi - yuqori o‘ng burchak uchun, uchinchisi - pastki o‘ng burchak uchun, to‘rtinchisi - pastki chap burchak uchun.

Elliptik yumaloqlik

Chiziqcha orqali berilgan ikkita qiymat elliptik yumaloqlikni o‘rnatadi. Chiziqchadan oldingi qiymat gorizontal yumaloqlikni, chiziqchadan keyingi qiymat - vertikal yumaloqlikni ko‘rsatadi:

selector {
	border-radius: gorizontal / vertikal;
}

Agar bir nechta burchaklar uchun yumaloqlik belgilansa, chiziqchadan oldin barcha gorizontal yumaloqliklar, undan keyin esa barcha vertikal yumaloqliklar sanab o‘tiladi.

Misol

Barcha burchaklar uchun 10px yumaloqlik o‘rnatamiz:

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

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

Misol

Nuqtali chegarada yumaloqlik qanday ko‘rinishini ko‘rib chiqamiz:

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

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

Misol

Bir diagonal burchaklari uchun 10px yumaloqlik, ikkinchi diagonal burchaklari uchun 40px yumaloqlik o‘rnatamiz:

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

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

Misol

Yuqori chap burchak uchun 10px yumaloqlik, pastki o‘ng burchak uchun 30px yumaloqlik, ikkinchi diagonal burchaklari uchun 50px yumaloqlik o‘rnatamiz:

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

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

Misol

Har bir burchak uchun turli yumaloqliklar o‘rnatamiz:

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

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

Misol

Keling, elliptik yumaloqlik yaratamiz, yumaloqlikning gorizontal qismi uchun 20px, vertikal qismi uchun 40px o‘rnatamiz:

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

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

Misol

Endi esa har bir burchak uchun alohida-alohida turli elliptik yumaloqlik o‘rnatamiz:

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

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

Misol

Agar kvadrat blok uchun yumaloqlikni kvadrat tomonining yarmiga teng o‘rnatilsa, doira hosil bo‘ladi:

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

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

Misol

Agar yumaloqlik kvadrat tomonidan kattaroq o‘rnatilsa, baribir doira hosil bo‘ladi:

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

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

Misol

Doirani border-radius ni 50% ga o‘rnatish orqali ham hosil qilish mumkin (afzalligi shundaki, kvadrat o‘lchamlari o‘zgarganda yumaloqlikni o‘zgartirish shart emas):

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

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

Misol

Agar border-radius to‘rtburchak uchun foizlarda o‘rnatilsa, elliptik yumaloqlik hosil bo‘ladi. Agar eni 400px, balandligi 200px, border-radius esa 10% ga o‘rnatilgan bo‘lsa, bu 40px/20px deb yozilganiga teng:

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

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

Misol

To‘rtburchak uchun border-radius ni 50% ga o‘rnatamiz - ellips hosil bo‘ladi:

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

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

Misol

border-radius xususiyati nafaqat chegaralar balki fonning ham burchaklarini yumaloqlashtiradi:

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

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

Shuningdek qarang

border xususiyati,
bu chegaralar uchun qisqartma xususiyat hisoblanadi