Atribut border-style CSS

Definisi dan penggunaan

Atribut border-style digunakan untuk menetapkan gaya garis pinggir elemen semua, atau untuk menetapkan gaya garis pinggir yang terpisah untuk masing-masing.

Hanya saat nilai ini bukan none, garis pinggir mungkin muncul.

Contoh 1

border-style:dotted solid double dashed;
  • Garis pinggir atas adalah titik
  • Garis pinggir kanan adalah garis tebal
  • Garis pinggir bawah adalah garis ganda
  • Garis pinggir kiri adalah garis gugur

Contoh 2

border-style:dotted solid double;
  • Garis pinggir atas adalah titik
  • Garis pinggir kanan dan kiri adalah garis tebal
  • Garis pinggir bawah adalah garis ganda

Contoh 3

border-style:dotted solid;
  • Garis pinggir atas dan bawah adalah titik
  • Garis pinggir kanan dan kiri adalah garis tebal

Contoh 4

border-style:dotted;
  • Semua 4 garis pinggir adalah titik

Lihat pula:

CSS Tutorial:Batas CSS

Panduan Referensi DOM HTML:Atribut borderStyle

Contoh

Atur gaya border empat sisi:

p
  {
  border-style:solid;
  }

Coba sendiri

Sintaksi CSS

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Nilai atribut

Nilai Deskripsi
none Mendefinisikan border tanpa border.
hidden Sama dengan "none" kecuali untuk tabel. Untuk tabel, "hidden" digunakan untuk memecahkan konflik border.
dotted Mendefinisikan border pipa. Dalam sebagian besar browser muncul sebagai garis tebal.
dashed Mendefinisikan garis pipa. Dalam sebagian besar browser muncul sebagai garis tebal.
solid Mendefinisikan garis tebal.
double Mendefinisikan garis ganda. Lebar garis ganda sama dengan nilai border-width.
groove Mendefinisikan border 3D groovy. Efectnya tergantung dari nilai border-color.
ridge Mendefinisikan border 3D ribbony. Efectnya tergantung dari nilai border-color.
inset Mendefinisikan border 3D inset. Efectnya tergantung dari nilai border-color.
outset Mendefinisikan border 3D outset. Efectnya tergantung dari nilai border-color.
inherit Ditetapkan agar gaya border diwarisi dari elemen induk.

Deskripsi

Gaya border yang paling tak diperkirakan adalah double. Didefinisikan sebagai lebar dua garis ditambah ruang antara garis-garis yang sama dengan nilai border-width. Namun, spesifikasi CSS tidak menyatakan apakah salah satu garis lebih tebal daripada yang lain atau apakah kedua garis seharusnya memiliki lebar yang sama, serta apakah ruang antara garis seharusnya lebih tebal daripada garis. Semua hal ini diutus oleh agen pengguna, dan kreator tidak memiliki pengaruh atas keputusan ini.

Detil teknis

Nilai standar: tidak disebutkan
Inheritsi: no
Versi: CSS1
Sintaksu JavaScript: object.style.borderStyle="dotted double"

Beberapa contoh lainnya

Mengatur gaya border empat sisi
Contoh ini menunjukkan bagaimana mengatur gaya border empat sisi.
Mengatur border yang berbeda untuk setiap sisi
Contoh ini menunjukkan bagaimana mengatur gaya border di setiap sisi elemen.

Dukungan browser

Angka di tabel menunjukkan versi pertama browser yang mendukung atribut ini penuh.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5