4-7 邊框 設定

border 屬性列表

設定元素 邊框 寬度、樣式、顏色 美化情形

屬性	說明	CSS3	連結
border-width	設定邊框的 寬度(粗細)		英 ／ 中
border-style	設定邊框的 樣式		英 ／ 中
border-color	設定邊框的 顏色		英 ／ 中
border	邊框複合屬性。 同時 設計 四邊 的邊框，設定 寬度、樣式、顏色		英 ／ 中
border-top	設計 上方 的邊框		英 ／ 中
border-right	設計 右側 的邊框		英 ／ 中
border-bottom	設計 下方 的邊框		英 ／ 中
border-left	設計 左側 的邊框		英 ／ 中

簡要說明

border-width

屬性值寫法與 padding、margin 相同

  border-width: 四邊相同 ;
  border-width: 上 右 下 左 ;        <!-- 書寫順序為【順時鐘】 -->
  border-width: 上 左右 下
  border-width: 上下 左右 ;

常用寬度單位：px、thin（細）、medium（中等，預設值）、thick（粗）等

border-style

設定 四邊 的邊框樣式

屬性	說明
border-style	設定 四邊相同 的邊框樣式
border-top-style	設計 上方 的邊框樣式
border-right-style	設計 右側 的邊框樣式
border-bottom-style	設計 下方 的邊框樣式
border-left-style	設計 左側 的邊框樣式

屬性值寫法與 padding、margin 相同

  border-style: 四邊相同 ;
  border-style: 上 右 下 左 ;        <!-- 書寫順序為【順時鐘】 -->
  border-style: 上 左右 下
  border-style: 上下 左右 ;

邊框類型

屬性	說明	邊框樣式
none	無邊框
dotted	點狀 的邊框樣式
dashed	虛線 的邊框樣式
solid	實線 的邊框樣式
double	雙線 的邊框樣式

註：3D邊框型式，請自行參考。

border-color

屬性	說明
color	設定邊框 色彩
transparent	設定邊框 透明

屬性值寫法與 padding、margin 相同

  border-color: 四邊相同 ;
  border-color: 上 右 下 左 ;        <!-- 書寫順序為【順時鐘】 -->
  border-color: 上 左右 下
  border-color: 上下 左右 ;

border

  (1)屬性值寫法：
  border: border-width  border-style border-color ;

  (2)例：
  border:5px solid red;