border-radius
Misol
Ikkita <div> elementiga yumaloq burchaklar qo‘shing:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px 20px;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
border-radius xususiyati element burchaklarining radiusini belgilaydi.
Maslahat: Bu xususiyat elementlarga yumaloq burchaklar qo‘shish imkonini beradi!
Bu xususiyat birdan to‘rttagacha qiymatga ega bo‘lishi mumkin. Qoidalar quyidagicha:
To‘rtta qiymat - border-radius: 15px 50px 30px 5px; (birinchi qiymat yuqori chap burchakka, ikkinchi qiymat yuqori o‘ng burchakka, uchinchi qiymat pastki o‘ng burchakka, to‘rtinchi qiymat esa pastki chap burchakka qo‘llaniladi):
Uchta qiymat - border-radius: 15px 50px 30px; (birinchi qiymat yuqori chap burchakka, ikkinchi qiymat yuqori o‘ng va pastki chap burchaklarga, uchinchi qiymat esa pastki o‘ng burchakka qo‘llaniladi):
Ikkita qiymat - border-radius: 15px 50px; (birinchi qiymat yuqori chap va pastki o‘ng burchaklarga, ikkinchi qiymat esa yuqori o‘ng va pastki chap burchaklarga qo‘llaniladi):
Bitta qiymat - border-radius: 15px; (qiymat to‘rtala burchakka qo‘llaniladi va ular bir xilda yumaloqlanadi:
| Standart qiymat: | 0 |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | ha. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.borderRadius="25px" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| border-radius | 5 | 9 | 4 | 5 | 10.5 |
CSS sintaksisi
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
Eslatma: Har bir radius uchun to‘rtta qiymat quyidagi tartibda beriladi: yuqori chap, yuqori o‘ng, pastki o‘ng, pastki chap. Agar pastki chap tushirib qoldirilsa, u yuqori o‘ng bilan bir xil bo‘ladi. Agar pastki o‘ng tushirib qoldirilsa, u yuqori chap bilan bir xil bo‘ladi. Agar yuqori o‘ng tushirib qoldirilsa, u yuqori chap bilan bir xil bo‘ladi.
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| length | Burchaklar shaklini belgilaydi. Standart qiymati — 0. Uzunlik birliklari haqida o‘qing | Demo ❯ |
| % | Burchaklar shaklini foizlarda (%) belgilaydi | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
Fon rangiga ega element uchun yumaloq burchaklar o‘rnating:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
O‘zingiz sinab ko‘ring »
Misol
Chegaraga ega element uchun yumaloq burchaklar o‘rnating:
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
O‘zingiz sinab ko‘ring »
Misol
Fon rasmiga ega element uchun yumaloq burchaklar o‘rnating:
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
O‘zingiz sinab ko‘ring »
Misol
Bunga ham e’tibor bering:
#example1 {
border-radius: 2em / 5em;
}
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
border-radius: 2em 1em 4em / 0.5em 3em;
}
/* is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em; */
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS yumaloq burchaklar
HTML DOM ma’lumotnomasi: borderRadius xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!