Sifat border-style

Sifat border-style menetapkan gaya sempadan untuk semua sisi secara serentak atau secara berasingan untuk setiap sisi. Ia adalah sifat singkatan untuk sifat-sifat berikut: border-left-style, border-right-style, border-top-style, border-bottom-style.

Sintaks

cssselector {
  border-style: nilai;
}

Nilai

Nilai	Keterangan
`solid`	Garis padat.
`dotted`	Sempadan berupa titik-titik.
`dashed`	Sempadan berupa sengkang.
`ridge`	Sempadan berupa garis timbul.
`double`	Sempadan berupa garis berganda. Untuk melihat kesannya, ketebalan sempadan mesti sekurang-kurangnya `3px`.
`groove`	Sempadan tenggelam.
`inset`	Sempadan tertekan.
`outset`	Sempadan terangkat.
`none`	Tiada sempadan.

Nilai lalai: none.

Bilangan Nilai

Sifat boleh menerima 1, 2, 3 atau 4 nilai, dinyatakan dengan ruang:

Bilangan	Keterangan
`1`	Jenis untuk semua sisi secara serentak.
`2`	Nilai pertama untuk atas dan bawah, kedua - untuk sempadan kiri dan kanan.
`3`	Nilai pertama untuk atas, kedua - untuk sempadan kiri dan kanan, ketiga - untuk bawah.
`4`	Nilai pertama untuk sempadan atas, kedua - untuk kanan, ketiga - untuk bawah, keempat - untuk sempadan kiri.

Contoh . Nilai solid

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Contoh . Nilai dotted

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Contoh . Nilai dashed

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: dashed;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Contoh . Nilai ridge

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: ridge;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Contoh . Nilai double

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: double;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Contoh . Nilai groove

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: groove;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Contoh . Nilai inset

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: inset;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Contoh . Nilai outset

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: outset;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Contoh

Dalam contoh ini, jenis sempadan yang berbeza ditetapkan untuk sisi elemen yang berbeza:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid dotted dashed dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Contoh

Kini untuk sisi elemen yang berbeza juga ditetapkan ketebalan sempadan dan warnanya yang berbeza:

html<div id="elem"></div>

css#elem {
  border-width: 1px 2px 3px 4px;
  border-style: dashed dotted solid double;
  border-color: red blue green black;
  width: 300px;
  height: 100px;
}

Результат:

Contoh

Kini untuk sempadan atas dan bawah ditetapkan jenis solid, dan untuk kanan dan kiri - dotted:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Lihat juga

sifat border-color,
yang menetapkan warna sempadan
sifat border-width,
yang menetapkan ketebalan sempadan
sifat border,
yang merupakan sifat singkatan untuk sempadan