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-colorborder-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