Atribut border-start-end-radius CSS
- Halaman sebelumnya border-spacing
- Halaman berikutnya border-start-start-radius
Definisi dan penggunaan
border-start-end-radius
properti ini digunakan untuk mendefinisikan jarak rounding antara awal arah blok (block-start) dan akhir arah teks (inline-end).
Perhatian:properti CSS yang relevan writing-mode
,text-orientation
dan direction
mendefinisikan arah blok dan arah teks. Ini adalah alasan mengapa properti ini juga mempengaruhi border-start-end-radius
hasil properti ini. Untuk halaman berbahasa Inggris, arah teks dalam teks berurutan dari kiri ke kanan, dan arah blok turun.
jika border-start-end-radius
jika properti ini memiliki dua nilai, rounding akan menjadi ellips:
border-start-end-radius: 50px 100px;
jika border-start-end-radius
jika properti ini memiliki nilai, rounding akan menjadi lingkaran:
border-start-end-radius: 50px;
CSS border-start-end-radius
properti dengan border-bottom-left-radius
,border-bottom-right-radius
,border-top-left-radius
dan border-top-right-radius
Sama seperti, tapi border-start-end-radius
Atribut ini tergantung pada arah blok dan arah dalam.
Contoh
Contoh 1
Menambahkan rounding rounding di awal arah blok dan akhir arah dalam untuk beberapa elemen:
#example1 { background-color: lightblue; border-start-end-radius: 50px; } #example2 { background-color: lightblue; border-start-end-radius: 50px 20px; } #example3 { background-color: lightblue; border-start-end-radius: 50%; direction: rtl; } #example4 { background-color: lightblue; border-start-end-radius: 50%; writing-mode: vertical-rl; }
Contoh 2: Gabungan atribut direction
Posisi rounding rounding di awal arah blok dan akhir arah dalam terpengaruh oleh direction
Pengaruh atribut:
#example1 { border: 2px solid red; direction: rtl; border-start-end-radius: 25px; }
Contoh 3: Gabungan atribut writing-mode
Posisi rounding rounding di awal arah blok dan akhir arah dalam terpengaruh oleh writing-mode
Pengaruh atribut:
#example2 { border: 2px solid red; writing-mode: vertical-rl; border-start-end-radius: 25px; }
Syntaks CSS
border-start-end-radius: 0|length|initial|inherit;
Nilai atribut
Nilai | Deskripsi |
---|---|
0 | Nilai default. |
length | Mendefinisikan bentuk rounding rounding di awal arah blok dan akhir arah dalam. Lihat:Satuan CSS. |
% | Mendefinisikan bentuk rounding dengan persentase panjang elemen di sumbu yang relevan. |
initial | Atur atribut ini ke nilai default. Lihat initial. |
inherit | Mengambil atribut ini dari elemen induknya. Lihat inherit. |
Detil teknis
Nilai default: | 0 |
---|---|
Inheritance: | Tidak |
Pembuatan animasi: | Didukung. Lihat:Atribut yang berhubungan dengan animasi. |
Versi: | CSS3 |
Syntaks JavaScript: | object.style.borderStartEndRadius="50px" |
Dukungan browser
Angka di tabel menunjukkan versi browser yang sepenuhnya mendukung atribut ini.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
89.0 | 89.0 | 66.0 | 15.0 | 75.0 |
Halaman yang berhubungan
Panduan:Kotak rounding CSS
Referensi:Atribut border-bottom-left-radius CSS
Referensi:Atribut border-bottom-right-radius CSS
Referensi:Atribut border-top-left-radius CSS
Referensi:Atribut border-top-right-radius CSS
Referensi:Atribut direction CSS
Referensi:Atribut text-orientation CSS
Referensi:Atribut writing-mode CSS
- Halaman sebelumnya border-spacing
- Halaman berikutnya border-start-start-radius