Atribut border-start-end-radius CSS

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

Coba sendiri

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

Coba sendiri

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

Coba sendiri

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