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

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

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:

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

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

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

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

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

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

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

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

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

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

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

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

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

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;
}

Результат:

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:

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

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

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

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

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

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

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

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

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

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

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

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

Результат:

Həmçinin bax