從上一節我們知道，要設置一個元素的邊框，必須同時設置邊框的寬度border-width、邊框的外觀border-style和邊框的顏色border-color這三個屬性值。
語法：
border-width:像素值;
說明：
在CSS初學者階段，我們都是建議采用像素做單位
border-style屬性用於設置邊框的外觀，例如實線邊框和虛線邊框。
語法：
border-style:屬性值;
說明：
border-style屬性取值如下：
從表中我們可以看出，solid、dashed、dotted和double用於定義基本邊框樣式，從下圖1中，我們可以看出這幾個屬性值的明顯區別。
圖1 基本邊框樣式
inset、outset、ridge和groove是用於定義3D邊框樣式，如果我們將border-width定義得比較小時，這幾個屬性值的效果幾乎都一樣，但是當border-width定義得足夠大時，這幾個屬性值的區別就明顯出來了。
圖2 border-width比較小時的3D邊框樣式（border-width為2px）
圖3 border-width比較大時的3D邊框樣式（border-width為15px）
最不可預測的邊框樣式是 double。它定義為兩條線的寬度再加上這兩條線之間的空間等於 border-width 值。不過，CSS 規范並沒有說其中一條線是否比另一條粗或者兩條線是否應該是一樣的粗，也沒有指出線之間的空間是否應當比線粗。所有這些都有用戶代理決定，創作人員對這個決定沒有任何影響。
大家請記住，雖然border-style屬性值很多，但是大部分我們都用不上。一般情況下，我們用到solid和dashed這兩個屬性值就夠了。大家要記住這一點喔！
border-color屬性用來定義邊框的顏色。
語法：
border-color:顏色值
說明：
對於顏色的取值，請使用前端神器“在線調色板”來選取。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS border屬性</title>
<style type="text/css">
img
{
border-width:1px;
border-style:solid;
border-color:Red;
}
</style>
</head>
<body>
<div id="div1">
<img src="../App_images/lesson/run_cj/one piece.jpg" alt=""/>
</div>
</body>
</html>
在浏覽器預覽效果如下：
設置一個元素的邊框就要設置3個屬性：border-width、border-style和border-color。如下：
border-width:1px;
border-style:solid;
border-color:Red;
這種寫法費時費力，導致代碼量多。因此我們邊框CSS樣式有一個簡潔的寫法：
border:1px solid Red;
這一行代碼與之前的那一段代碼是等效的。
這是一個技巧，大部分CSS邊框樣式都是采用這種寫法。希望大家養成使用簡潔寫法的習慣。這種簡潔寫法，堅持寫多了就熟練了。