Lebih "Try it Yourself" contoh di bawah ini.
Definisi dan Penggunaan
Properti border-style set gaya elemen empat perbatasan. Properti ini dapat memiliki dari satu sampai empat nilai.
contoh:
- border-style:dotted solid double dashed;
- batas atas dihiasi
- batas kanan solid
- batas bawah adalah ganda
- perbatasan kiri putus-putus
- border-style:dotted solid double;
- batas atas dihiasi
- perbatasan kanan dan kiri yang padat
- batas bawah adalah ganda
- border-style:dotted solid;
- batas atas dan bawah yang putus-putus
- perbatasan kanan dan kiri yang padat
- border-style:dotted;
- keempat perbatasan yang putus-putus
| nilai default: | none |
|---|---|
| mewarisi: | no |
| animatable: | no. Read about animatable |
| Versi: | CSS1 |
| sintaks JavaScript: | object .style.borderStyle="dotted double" Try it |
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
| Milik | |||||
|---|---|---|---|---|---|
| border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: Nilai "hidden" tidak didukung di IE7 dan sebelumnya. IE8 membutuhkan DOCTYPE!. IE9 dan dukungan kemudian "hidden" .
CSS Syntax
border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;Nilai properti
| Nilai | Deskripsi | Mainkan |
|---|---|---|
| none | nilai default. Menentukan ada perbatasan | Mainkan " |
| hidden | Sama seperti "none" , kecuali dalam resolusi konflik perbatasan untuk elemen tabel | Mainkan " |
| dotted | Menentukan perbatasan bertitik | Mainkan " |
| dashed | Menentukan perbatasan putus-putus | Mainkan " |
| solid | Menentukan batas padat | Mainkan " |
| double | Menentukan perbatasan ganda | Mainkan " |
| groove | Menentukan perbatasan berlekuk 3D. Efeknya tergantung pada nilai border-color | Mainkan " |
| ridge | Menentukan perbatasan bergerigi 3D. Efeknya tergantung pada nilai border-color | Mainkan " |
| inset | Menentukan perbatasan inset 3D. Efeknya tergantung pada nilai border-color | Mainkan " |
| outset | Menentukan batas awal 3D. Efeknya tergantung pada nilai border-color | Mainkan " |
| initial | Set properti ini ke nilai default. Baca tentang awal | Mainkan " |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Contoh lebih
Contoh
Mengatur perbatasan yang berbeda di setiap sisi dari sebuah elemen:
p.one {border-style: dotted solid dashed double;}
p.two {border-style:
dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four
{border-style: dotted;} Cobalah sendiri " Pages terkait
CSS tutorial: CSS Border
Referensi HTML DOM: borderStyle property