Atribut border-end-start-radius CSS

定义和用法

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

Coba sendiri

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

Coba sendiri

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

Coba sendiri

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