Properti Style borderStyle

Definisi dan penggunaan

borderStyle Properti ini mengatur atau mengembalikan gaya berbatasan elemen.

Properti ini dapat mengambil satu hingga empat nilai:

  • Satu nilai, seperti: p {border-style: solid} - Semua empat berbatasan adalah tebal
  • Dua nilai, seperti: p {border-style: solid dotted} - Atas dan bawah berbatasan adalah garis tebal, berbatasan kiri-kanan adalah garis pipa
  • Tiga nilai, seperti: p {border-style: solid dotted double} - Atas berbatasan adalah garis tebal, berbatasan kiri-kanan adalah garis titik, bawah berbatasan adalah garis ganda
  • Empat nilai, seperti: p {border-style: solid dotted double dashed} - Atas berbatasan adalah garis tebal, kanan berbatasan adalah garis pipa, bawah berbatasan adalah garis ganda, kiri berbatasan adalah garis pipa

Lihat pula:

Pelajaran CSS:Batas CSS

Panduan CSS:Properti border-style

Panduan DOM HTML:properti border

Contoh

Contoh 1

Tambahkan garis pinggir padat untuk elemen <div>:

document.getElementById("myDiv").style.borderStyle = "solid";

Coba sendiri

Contoh 2

Ubah gaya garis pinggir empat sisi elemen <div>:

document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";

Coba sendiri

Contoh 3

Kembalikan gaya garis pinggir elemen <div>:

alert(document.getElementById("myDiv").style.borderStyle);

Coba sendiri

Contoh 4

Pertunjukan untuk nilai yang berbeda:

var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;

Coba sendiri

Sintaks

Kembalikan properti borderStyle：

object.style.borderStyle

Atur properti borderStyle：

object.style.borderStyle = value
Nilai Deskripsi
none Mendefinisikan garis pinggir yang tak ada. Baku.
hidden Sama dengan "none", kecuali dalam menyelesaikan konflik garis pinggir elemen tabel.
dotted Mendefinisikan garis pinggir dengan titik.
dashed Mendefinisikan garis pinggir dengan garis ganda.
solid Mendefinisikan garis pinggir yang padat.
double Mendefinisikan dua garis pinggir. Lebar kedua garis pinggir sama dengan nilai border-width.
groove Mendefinisikan garis pinggir 3D groove. Efect tergantung dari border-color 。
ridge Mendefinisikan garis pinggir 3D ridged. Efect tergantung dari border-color 。
inset Mendefinisikan garis pinggir 3D inset. Efect tergantung dari border-color 。
nilai Mendefinisikan garis pinggir 3D outset. Efect tergantung dari nilai border-color.
initial Atur properti ini ke nilai baku. Lihat initial。
inherit Mengambil properti ini dari elemen induknya. Lihat inherit。

Detil teknis

Nilai baku： Tidak ada
Nilai kembalian： String yang merepresentasikan gaya garis pinggir elemen.
Versi CSS： CSS1

Browser mendukung

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan