CSS 邊框

CSS 邊框屬性

CSS border 屬性允許您指定元素邊框的樣式、寬度和顏色。

我的所有邊都有邊框。

我有一條紅色的下邊框。

我有圓角邊框。

我有一條藍色的左邊框。

CSS 邊框樣式

border-style 屬性指定要顯示的邊框類型。

允許以下值：

  • dotted - 定義點線邊框
  • dashed - 定義虛線邊框
  • solid - 定義實線邊框
  • double - 定義雙邊框
  • groove - 定義 3D 坡口邊框。效果取決于 border-color 值
  • ridge - 定義 3D 脊線邊框。效果取決于 border-color 值
  • inset - 定義 3D inset 邊框。效果取決于 border-color 值
  • outset - 定義 3D outset 邊框。效果取決于 border-color 值
  • none - 定義無邊框
  • hidden - 定義隱藏邊框

border-style 屬性可以設置一到四個值（用于上邊框、右邊框、下邊框和左邊框）。

實例

演示不同的邊框樣式：

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

結果：

點狀邊框。

虛線邊框。

實線邊框。

雙線邊框。

凹槽邊框。其效果取決于 border-color 的值。

壟狀邊框。其效果取決于 border-color 的值。

3D inset 邊框。其效果取決于 border-color 的值。

3D outset 邊框。其效果取決于 border-color 的值。

無邊框。

隱藏邊框。

混合邊框。

親自試一試

注意：除非設置了 border-style 屬性，否則其他 CSS 邊框屬性（將在下一章中詳細講解）都不會有任何作用！