Deskripsi
Properti gaya batas memungkinkan Anda untuk memilih salah satu dari gaya batas berikut -
none- Tanpa batas. (Setara dengan lebar batas: 0;)
solid - Perbatasan adalah satu garis utuh.
dotted - Perbatasan adalah serangkaian titik.
dashed - Perbatasan adalah rangkaian garis pendek.
double - Perbatasan adalah dua garis utuh.
groove - Batas tampak seolah-olah terukir di halaman.
ridge - Perbatasan terlihat kebalikan dari alur.
inset - Perbatasan membuat kotak terlihat seperti tersemat di halaman.
outset - Perbatasan membuat kotak terlihat seperti keluar dari kanvas.
hidden - Sama seperti tidak ada, kecuali dalam hal resolusi konflik perbatasan untuk elemen tabel.
Anda dapat mengubah gaya batas bawah, kiri, atas, dan kanan elemen secara individual menggunakan properti berikut -
border-bottom-style - mengubah gaya batas bawah.
border-top-style - mengubah gaya batas atas.
border-left-style - mengubah gaya batas kiri.
border-right-style - mengubah gaya batas kanan.
Nilai yang Mungkin
Salah satu nilai yang ditentukan di atas.
Berlaku untuk
Semua elemen HTML.
Sintaks DOM
object.style.borderStyle = "Any of the values defined above";
Contoh
Berikut adalah contoh untuk menampilkan semua gaya batas ini -
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style = "border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style = "border-width:4px; border-style:dashed;">
This is a dashed border.
</p>
<p style = "border-width:4px; border-style:double;">
This is a double border.
</p>
<p style = "border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style = "border-width:4px; border-style:ridge">
This is a ridge border.
</p>
<p style = "border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style = "border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style = "border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style = "border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a a border with four different styles.
</p>
</body>
</html>
Ini akan menghasilkan hasil sebagai berikut -