css border-width 邊框粗細

css border-width 邊框粗細屬於 border 屬性的其中一個重要屬性，專門用來設計網頁元素邊框的粗細（或說厚度或寬度），通常會搭配 border-color 以及 border-style 一起寫，只要透過 border-width 的參數，網頁設計師就可以很輕易的設計出各種元素不同的邊框粗細。

css border-width 邊框粗細設計語法
border-width: 粗細的參數;
正常情況來說，border-width 的參數可以有好幾種不同的單位，例如 ex, px, cm 等，比較建議使用 px 這相當普遍的單位。另外，假設我們要將四個邊分別設計不同的邊框粗細，可以像下面的這兩種寫法。
  • border-width: 上下邊框粗細 左右邊框粗細;
  • border-width: 上方粗細 右方粗細 下方粗細 左方粗細;
這兩種寫法是可以將不同方向的邊框拉出來做特別的設計，無論要用哪一種，都必須搭配 border-color 與 border-style 兩個屬性，border-width 才會有效果，這點要多多注意。

css border-width 邊框粗細設計範例
呈現的效果
測試用 css border-width 設計 DIV 邊框粗細
範例是一個簡單的 DIV 區塊，透過本篇文章介紹的主角 border-width 幫 DIV 的邊框設為 5px 粗（這樣看起來比較清楚），並搭配上 border-color 將邊框設為黃色（border-color:yellow）以及 border-style 將邊框設為實體線，就成為最後的這個效果囉！關於 border-color 與 border-style 的詳細介紹，可以參考這兩篇的內容。
範例中的 padding 是內距，與邊框設計無關，有興趣請讀這篇：css padding 內距。

關於 css boder-width 邊框粗細的設計技巧就介紹到這邊，還有更多文章準備分享。
分享於 2014-08-26