border-end-end-radius
Misol
Ba’zi elementlarning block-end va inline-end tomonlariga yumaloq burchak qo‘shing:
#example1 {
background-color: lightblue;
border-end-end-radius: 50px;
}
#example2 {
background-color: lightblue;
border-end-end-radius: 50px 20px;
}
#example3 {
background-color: lightblue;
border-end-end-radius: 50%;
direction: rtl;
}
#example4 {
background-color: lightblue;
border-end-end-radius: 50%;
writing-mode: vertical-rl;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
border-end-end-radius xususiyati elementning block-end va inline-end tomonlari orasidagi burchak radiusini belgilaydi.
Eslatma: Bog‘liq CSS xususiyatlari writing-mode, text-orientation va direction blok va inline yo‘nalishlarini belgilaydi. Shu sababli bu xususiyatlar border-end-end-radius xususiyatining natijasiga ham ta’sir qiladi. Ingliz tilidagi sahifalarda inline yo‘nalishi chapdan o‘ngga, blok yo‘nalishi esa yuqoridan pastga bo‘ladi.
Agar border-end-end-radius xususiyati ikkita qiymatga ega bo‘lsa, burchak ellips shaklida bo‘ladi:
- border-end-end-radius: 50px 100px;
Agar border-end-end-radius xususiyati bitta qiymatga ega bo‘lsa, burchak aylana shaklida bo‘ladi:
- border-end-end-radius: 50px;
CSS border-end-end-radius xususiyati CSS’ning border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius va border-top-right-radius xususiyatlariga juda o‘xshaydi, lekin border-end-end-radius xususiyati blok va inline yo‘nalishlariga bog‘liq.
| Standart qiymat: | 0 |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | ha. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.borderEndEndRadius="50px" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| border-end-end-radius | 89.0 | 89.0 | 66.0 | 15.0 | 75.0 |
CSS sintaksisi
border-end-end-radius: 0|length|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| 0 | Standart qiymat. | Demo ❯ |
| length | Block-end va inline-end tomonlari orasidagi burchak shaklini belgilaydi. Uzunlik birliklari haqida o‘qing | Demo ❯ |
| % | Block-end va inline-end tomonlari orasidagi burchak shaklini elementning tegishli o‘qdagi uzunligiga nisbatan foizda 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
direction xususiyati bilan
Blok va inline yo‘nalishlari oxiridagi yumaloq burchakning joylashuviga direction xususiyati ta’sir qiladi:
#example1 {
border: 2px solid red;
direction: rtl;
border-end-end-radius: 25px;
}
O‘zingiz sinab ko‘ring »
writing-mode xususiyati bilan
Blok va inline yo‘nalishlari oxiridagi yumaloq burchakning joylashuviga writing-mode xususiyati ta’sir qiladi:
#example2 {
border: 2px solid red;
writing-mode: vertical-rl;
border-end-end-radius: 25px;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS yumaloq burchaklar
CSS border-bottom-left-radius xususiyati: CSS Border-bottom-left-radius xususiyati
CSS border-bottom-right-radius xususiyati: CSS Border-bottom-right-radius xususiyati
CSS border-top-left-radius xususiyati: CSS Border-top-left-radius xususiyati
CSS border-top-right-radius xususiyati: CSS Border-top-right-radius xususiyati
CSS direction xususiyati: CSS Direction xususiyati
CSS text-orientation xususiyati: CSS Text-orientation xususiyati
CSS writing-mode xususiyati: CSS Writing-mode xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!