tutorial pengembangan web terbaru
 

Style borderStyle Property

<Style Object

Contoh

Tambahkan "solid" perbatasan ke <div> elemen:

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

Definisi dan Penggunaan

The Borderstyle set properti atau mengembalikan gaya perbatasan elemen ini.

Properti ini dapat berlangsung dari satu sampai empat nilai:

  • Satu nilai, seperti: p {border-style: padat} - semua empat perbatasan akan solid
  • Dua nilai, seperti: p {border-style: padat putus-putus} - atas dan batas bawah akan solid, kiri dan batas kanan akan dihiasi
  • Tiga nilai, seperti: p {border-style: dotted ganda padat} - perbatasan atas akan solid, kiri dan batas kanan akan dihiasi, batas bawah akan menjadi dua kali lipat
  • Empat nilai, seperti: p {border-style: padat titik-titik ganda putus-putus} - atas perbatasan akan solid, batas kanan akan dihiasi, batas bawah akan ganda, batas kiri akan putus-putus

Dukungan Browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Properti BorderStyle didukung di semua browser utama.

Sintaksis

Kembali properti BorderStyle:

object .style.borderStyle

Mengatur properti BorderStyle:

object .style.borderStyle= Nilai properti
Nilai Deskripsi
none Mendefinisikan tidak ada perbatasan. Ini adalah default
hidden Sama seperti "none" , kecuali dalam resolusi konflik perbatasan untuk elemen tabel
dotted Mendefinisikan perbatasan bertitik
dashed Mendefinisikan perbatasan putus-putus
solid Mendefinisikan sebuah perbatasan yang solid
double Mendefinisikan dua perbatasan. Lebar dari dua perbatasan adalah sama dengan nilai border-width
groove Mendefinisikan perbatasan berlekuk 3D. Efeknya tergantung pada nilai border-color
ridge Mendefinisikan perbatasan bergerigi 3D. Efeknya tergantung pada nilai border-color
inset Mendefinisikan perbatasan inset 3D. Efeknya tergantung pada nilai border-color
outset Mendefinisikan perbatasan awal 3D. Efeknya tergantung pada nilai border-color
initial Set properti ini ke nilai default. Baca tentang awal
inherit Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi

Rincian teknis

Nilai default: tak satupun
Kembali Nilai: Sebuah String, yang mewakili gaya perbatasan sebuah elemen
CSS Versi CSS1

Contoh lebih

Contoh

Mengubah gaya dari empat perbatasan dari <div> elemen:

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

Contoh

Kembali gaya perbatasan dari <div> elemen:

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

Contoh

Sebuah demonstrasi dari semua nilai yang berbeda:

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

Pages terkait

CSS tutorial: CSS Border

Referensi CSS: border-style property

Referensi HTML DOM: border property

<Style Object