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

cssselector {
  border-radius: qiymat;
}

Qiymatlar soni

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

Elliptik yumaloqlik

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

cssselector {
  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:

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

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

Результат:

Misol

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

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

css#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:

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

css#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:

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

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

Результат:

Misol

Har bir burchak uchun turli yumaloqliklar o‘rnatamiz:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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):

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

css#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:

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

css#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:

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

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

Результат:

Misol

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

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

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

Результат:

Shuningdek qarang