border-style

簡寫屬性語法:

border-style<line-style>{1,4}

預設值看每個獨立屬性

適用於:所有元素

繼承性:無

動畫性:否

計算值:看每個獨立屬性

媒 體:視覺

分拆獨立屬性語法:

border-*-style<line-style>

border-*-style = border-top-style,border-right-style,border-bottom-style,border-left-style

預設值none

適用於:所有元素

繼承性:無

動畫性:否

計算值:指定值

媒 體:視覺

取值:

none:
無輪廓。當定義了該值時,border-color將被忽略,border-width計算值為0,除非邊框輪廓應用了border-image
hidden:
隱藏邊框。
dotted:
點狀輪廓。
dashed:
虛線輪廓。
solid:
實線輪廓
double:
雙線輪廓。兩條單線與其間隔的和等於指定的border-width
groove:
3D凹槽輪廓。
ridge:
3D凸槽輪廓。
inset:
3D凹邊輪廓。
outset:
3D凸邊輪廓。

說明:

定義元素的邊框樣式。
  • border-style如果提供全部四個參數值,將按上、右、下、左的順序作用於四邊;只提供一個,將用於全部的四邊;提供兩個,第一個用於上、下,第二個用於左、右;提供三個,第一個用於上,第二個用於左、右,第三個用於下。
  • 如果border-width等於0border-style及其分拆獨立屬性將失效。
  • 對應的腳本特性分別為:borderStyle, borderTopStyle, borderRightStyle, borderBottomStyle, borderLeftStyle

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+ 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+

示例: