Atribut border-end-end-radius CSS

Halaman sebelumnya border-color
Halaman berikutnya border-end-start-radius

Definisi dan penggunaan

border-end-end-radius Properti digunakan untuk mendefinisikan jarak rounded antara akhir blok (block-end) dan akhir teks (inline-end).

Perhatian:Properti CSS yang relevan writing-mode,text-orientation dan direction Mendefinisikan arah blok dan arah teks. Ini adalah alasannya properti ini juga mempengaruhi border-end-end-radius Hasil properti. Untuk halaman berbahasa Inggris, arah teks dalam baris adalah dari kiri ke kanan, dan arah blok adalah ke bawah.

Jika border-end-end-radius Properti memiliki dua nilai, rounded akan menjadi lingkaran elips:

border-end-end-radius: 50px 100px;

Jika border-end-end-radius Properti memiliki nilai, lingkaran bulat akan menjadi rounded:

border-end-end-radius: 50px;

CSS border-end-end-radius dengan border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius dan border-top-right-radius sama seperti border-end-end-radius atribut ini tergantung pada arah blok dan arah teks.

contoh

contoh 1

tambah rounded di akhir arah blok dan arah teks beberapa elemen:

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

coba sendiri

contoh 2: gabungan atribut direction

posisi rounded di akhir arah blok dan arah teks terpengaruh oleh direction pengaruh atribut:

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-end-end-radius: 25px;
}

coba sendiri

contoh 3: gabungan atribut writing-mode

posisi rounded di akhir arah blok dan arah teks terpengaruh oleh writing-mode pengaruh atribut:

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-end-end-radius: 25px;
}

coba sendiri

syntaks CSS

border-end-end-radius: 0|length|initial|inherit;

nilai atribut

nilai	deskripsi
0	nilai default.
length	definisi bentuk rounded di akhir arah blok dan arah teks.
%	definisi bentuk rounded 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
keberlanjutan:	tidak
pembuatan animasi:	didukung. Lihat:atribut yang berhubungan dengan animasi.
versi:	CSS3
syntaks JavaScript:	object.style.borderEndEndRadius="50px"