Sifat border-style CSS

定义和用法

border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

只有当这个值不是 none 时边框才可能出现。

例子 1

border-style:dotted solid double dashed;
  • 上边框是点状
  • 右边框是实线
  • 下边框是双线
  • 左边框是虚线

例子 2

border-style:dotted solid double;
  • 上边框是点状
  • 右边框和左边框是实线
  • 下边框是双线

例子 3

border-style:dotted solid;
  • 上边框和下边框是点状
  • 右边框和左边框是实线

例子 4

border-style:dotted;
  • 所有 4 个边框都是点状

另请参阅：

CSS 教程：BORDER CSS

Panduan HTML DOM:Sifat borderStyle

Contoh

Tetapkan gaya pinggir 4 buah:

p
  {
  border-style:solid;
  }

Cuba sendiri

Rumus CSS

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

Nilai sifat

Nilai Penerangan
none Mentakrifkan pinggir kosong.
hidden Sama seperti "none" tetapi untuk tabel kecuali, untuk tabel, "hidden" digunakan untuk memecahkan konflik pinggir.
dotted Mentakrifkan garis titik. Disejumpai sebagai garis tebal di sebahagian besar pelayar.
dashed Mentakrifkan garis gurun. Disejumpai sebagai garis tebal di sebahagian besar pelayar.
solid Mentakrifkan garis tebal.
double Mentakrifkan garis ganda. Lebar garis ganda sama dengan nilai border-width.
groove Mentakrifkan pinggir 3D kerobokan. Efectnya bergantung kepada nilai border-color.
ridge Mentakrifkan pinggir 3D ribbong. Efectnya bergantung kepada nilai border-color.
inset Mentakrifkan pinggir 3D inset. Efectnya bergantung kepada nilai border-color.
outset Mentakrifkan pinggir 3D outset. Efectnya bergantung kepada nilai border-color.
inherit Ditetapkan supaya gaya pinggir diwarisi daripada elemen bapa.

Penerangan

Gaya pinggir yang paling tak diperkirakan adalah double. Ia ditakrifkan sebagai lebar dua garis ditambah ruang di antara garis-garis ini yang sama dengan nilai border-width. Walau bagaimanapun, spesifikasi CSS tidak menyatakan sama ada salah satu garis yang lebih tebal daripada yang lain atau sama ada kedua garis harus sama tebal, atau sama ada ruang di antara garis harus lebih tebal daripada garis. Semua ini diutus oleh perwakilan pengguna, dan para kreatif tidak mempunyai pengaruh atas keputusan ini.

Detil teknologi

Nilai baku: tidak disifatkan
Inheritsi: tidak
Versi: CSS1
Rumus JavaScript: object.style.borderStyle="dotted double"

Contoh lebih banyak

Menetapkan gaya pinggir empat
Contoh ini menunjukkan bagaimana untuk menetapkan gaya pinggir empat.
Menetapkan pinggir berbeda untuk setiap sisi
Contoh ini menunjukkan bagaimana untuk menetapkan gaya pinggir berbeda di setiap sisi elemen.

Pembiayaan pelayar

Nombor di dalam tabel menunjukkan versi pereka paling awal yang mendukung sifat ini.

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