CSS 的 border 屬性是用來修改元素邊框的標準語法，早期我們在利用
HTML 設計網頁的時候，常常會需要用到圖片邊框、文字邊框、表格邊框、文字欄位邊框 ... 等等的設計，如果要用
HTML 設計出好看的邊框其實並不容易，甚至有的時候還必須藉由圖片的設計再搭配上
HTML 的網頁元素才會好看，不過我們現在用 CSS 的 border 屬性來設計，就可以大幅度的改善傳統設計上的困難，今天我們就教各位如何用 CSS 的 border 屬性來設計圖片的邊框顏色與樣式，設計概念非常簡單，我們用幾個範例來呈現給各位看看。
CSS border color 屬性設計圖片邊框顏色範例範例的視覺效果
範例準備了兩張圖片，利用
border-color 來設計邊框顏色，一張的邊框設定為藍色（border-color:blue;），另外一張則設為黃色（border-color:yellow），你可以自己決定要用什麼樣的顏色，另外，光是
border-color 是無法呈現出效果的，還需要搭配上
border-width 來控制邊框的粗細以及
border-style 來控制邊框的樣式。
CSS border style屬性設計圖片邊框樣式範例範例的視覺效果
請注意範例中紅色標住的 border-style 屬性，我們透過 border-style 屬性的參數值修改，就可以修改範例圖片的邊框樣式，無論是虛線、點線、雙實線 ... 等特效都可以很輕易的做到，我們的這一篇《
css border-style 邊框樣式》有許多特色邊框樣式可以使用。
其實以上的圖片邊框顏色與樣式可以用單一個 border 一次設計完成後，標準語法像是下面的範例這個樣子，參考一下吧！因為最常用的寫法就是這樣。
直接使用 CSS border 屬性設計圖片邊框範例範例的視覺效果
有注意到嗎？這個範例與上面那個範例的效果一模一樣，可是程式碼縮點很多，因為我們利用 border 整合寫法，把三個邊框屬性 border-color、border-width 以及 border-style 整合在一起了，所以可以很快的把要呈現的效果寫出來，這也是相當普遍的一種寫法。
CSS 的 border 可以應用的範圍相當廣泛，如果你想更進一步的了解 CSS border 屬性的更多詳細用法，可以參考這一篇的內容介紹：
CSS border 元素邊框設計。
延伸閱讀
