Atribut border-end-start-radius CSS
- Halaman sebelumnya border-end-end-radius
- Halaman berikutnya border-image
定义和用法
border-end-start-radius
属性用于定义元素块方向末尾(block-end)和行内方向起始处(inline-start)之间的圆角半径。
注意:相关的 CSS 属性 writing-mode
,text-orientation
dan direction
定义了块方向和行内方向。这就是为什么这些属性也会影响 border-end-start-radius
属性的结果。对于英文页面,行内方向是从左到右,块方向是向下。
如果 border-end-start-radius
属性有两个值,则圆角将是一个椭圆:
border-end-start-radius: 50px 100px;
如果 border-end-start-radius
属性有一个值,则圆角将是一个圆形:
border-end-start-radius: 50px;
CSS border-end-start-radius
属性与 border-bottom-left-radius
,border-bottom-right-radius
,border-top-left-radius
dan border-top-right-radius
hampir sama, tetapi border-end-start-radius
Atribut ini tergantung dari arah blok dan arah inline.
Contoh
Contoh 1
Menambah rounded di ujung arah blok dan awal arah inline untuk beberapa elemen:
#example1 { background-color: lightblue; border-end-start-radius: 50px; } #example2 { background-color: lightblue; border-end-start-radius: 50px 20px; } #example3 { background-color: lightblue; border-end-start-radius: 50%; direction: rtl; } #example4 { background-color: lightblue; border-end-start-radius: 50%; writing-mode: vertical-rl; }
Contoh 2: Gabungan atribut direction
Posisi rounded di ujung arah blok dan awal arah inline terpengaruh oleh direction
Pengaruh atribut:
#example1 { border: 2px solid red; direction: rtl; border-end-start-radius: 25px; }
Contoh 3: Gabungan atribut writing-mode
Posisi rounded di ujung arah blok dan awal arah inline terpengaruh oleh writing-mode
Pengaruh atribut:
#example2 { border: 2px solid red; writing-mode: vertical-rl; border-end-start-radius: 25px; }
Syntaks CSS
border-end-start-radius: 0|length|initial|inherit;
Nilai atribut
Nilai | Deskripsi |
---|---|
0 | Nilai default. |
length | Mendefinisikan bentuk rounded block di ujung arah blok dan awal arah inline. Lihat:Satuan CSS. |
% | Menggunakan persentase panjang elemen di sumbu yang relevan untuk mendefinisikan bentuk rounded block ini. |
initial | Setel 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: | Dukungan. Lihat:Atribut yang berhubungan dengan animasi. |
Versi: | CSS3 |
Syntaks JavaScript: | object.style.borderEndStartRadius="50px" |
Dukungan browser
Angka di tabel menunjukkan versi browser yang pertama yang mendukung atribut ini penuhnya.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
89.0 | 89.0 | 66.0 | 15.0 | 75.0 |
halaman yang relevan
Panduan:Kotak rounded CSS
Referensi:Atribut border-bottom-left-radius CSS
Referensi:Atribut border-bottom-right-radius CSS
Referensi:Properti border-top-left-radius CSS
Referensi:Properti border-top-right-radius CSS
Referensi:Atribut direction CSS
Referensi:Atribut text-orientation CSS
Referensi:Atribut writing-mode CSS
- Halaman sebelumnya border-end-end-radius
- Halaman berikutnya border-image