Properti border-inline-start CSS

Halaman sebelumnya border-inline-end-width
Halaman berikutnya border-inline-start-color

Definisi dan penggunaan

border-inline-start Properti adalah singkatan dari berikut ini:

CSS border-inline-start Properti ini sama dengan properti CSS border-bottom,border-left,border-right dan border-top Sama sangat, tetapi border-inline-start Properti ini tergantung pada arah dalam teks.

Perhatian:properti CSS yang relevan writing-mode,orientasi-text dan direction Mendefinisikan arah baris. Ini akan mempengaruhi posisi awal dan akhir baris, serta border-inline-start Hasil properti. Untuk halaman berbahasa Inggris, arah baris adalah dari kiri ke kanan, dan arah blok adalah dari atas ke bawah.

Contoh

Contoh 1

Atur lebar, warna, dan gaya border di awal arah baris:

div {
  border-inline-start: 10px solid pink;
}

Coba sendiri

Contoh 2: Gabungan properti writing-mode

Posisi border di awal arah baris dipengaruhi oleh writing-mode Dampak properti:

div {
  writing-mode: vertical-rl;
  border-inline-start: 5px solid blue;
}

Coba sendiri

Contoh 3: Gabungan properti direction

Posisi border di awal arah baris dipengaruhi oleh direction Dampak properti:

div {
  direction: rtl;
  border-inline-start: 5px solid hotpink;
}

Coba sendiri

Sintaks CSS

border-inline-start: border-inline-start-width border-inline-start-style border-inline-start-color|initial|inherit;

Nilai properti

Nilai	Deskripsi
border-inline-start-width	Tentukan lebar border elemen di awal arah baris. Nilai default adalah medium.
border-inline-start-style	Tentukan gaya border elemen di awal arah baris. Nilai default adalah none.
border-inline-start-color	Tentukan warna border elemen di awal arah baris. Nilai default adalah warna border saat ini.
initial	Atur properti ini ke nilai default. Lihat initial.
inherit	Mengambil properti ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai default:	medium none currentcolor
Inheritance:	Tidak
Produksi animasi:	Didukung. Lihat:Properti terkait animasi.
Versi:	CSS3
语法 JavaScript:	object.style.borderInlineStart="pink dotted 5px"