Properti border-start-start-radius CSS

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

Definisi dan penggunaan

border-start-start-radius Aturan digunakan untuk mendefinisikan jarak lingkaran tajuk antara tempat awal blok (block-start) dan tempat awal dalam teks (inline-start).

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

Jika border-start-start-radius Jika aturan memiliki dua nilai, lingkaran tajuk akan menjadi ellips:

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

Jika border-start-start-radius Jika aturan memiliki nilai, lingkaran tajuk akan menjadi lingkaran:

border-start-start-radius: 50px;

CSS border-start-start-radius aturan border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius dan border-top-right-radius hampir sama seperti, tapi border-start-start-radius Atribut ini tergantung pada arah blok dan arah teks.

Contoh

Contoh 1

Menambahkan rounding rounding di awal arah blok dan arah teks untuk beberapa elemen:

#example1 {
  background-color: lightblue;
  border-start-start-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-start-start-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-start-start-radius: 50%;
  direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-start-start-radius: 50%;
  writing-mode: vertical-rl;
}

Coba sendiri

Contoh 2: Gabungan atribut direction

Posisi rounding rounding di awal arah blok dan arah teks terpengaruh oleh direction Pengaruh atribut:

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

Coba sendiri

Contoh 3: Gabungan atribut writing-mode

Posisi rounding rounding di awal arah blok dan arah teks terpengaruh oleh writing-mode Pengaruh atribut:

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

Coba sendiri

Syntaks CSS

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

Nilai atribut

Nilai	Deskripsi
0	Nilai default.
length	Definisi bentuk rounding rounding di awal arah blok dan arah teks. Lihat:Satuan CSS.
%	Definisi 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
Produksi animasi:	Dukungan. Lihat:Atribut animasi.
Versi:	CSS3
Syntaks JavaScript:	object.style.borderStartStartRadius="50px"