遺憾的是，簡寫屬性（如border-color和border-style）并不總像你想得那么有用。

例如，網站建設人員可能想在所有h1元素上應用一個粗的灰色實線邊框，不過只是底邊上有此邊框。如果只使用我們目前已經討論過的屬性，應用這樣一個邊框時會遇到很大困難。以下是兩個例子：

h1{border-bottom-width:thick;/*option#1*/

border-bottom-style:solid;

border-bottom-color:gray;}

h1{border-width:0 0 thick;/*option#2*/

border-style:none none solid;

border-color:gray;}

根據以上鍵入的規則，這兩種做法都很不方便。幸運的是，還有一種更好的解決方法：

h1{border-bottom:thick solid gray;}

這只是向底邊邊框應用值，而所有其他邊的邊框仍為其默認值。由于默認的邊框樣式為none，所以元素其他三個邊上不出現邊框。

網頁設計，總共有4個這樣的簡寫屬性。

border-top、border-right、border-bottom、border-left

值：[<border-width>||<border-style>||<border-color>]|inherit

初始值：對簡寫屬性未定義

應用于：所有元素

繼承性：無

計算值：見單個屬性（border-width等）

可以使用這些屬性創建一些復雜的邊框：

h1{border-left:3px solid gray;

border-right:black 0.25em dotted;

border-top:thick silver inset;

border-bottom:double rgb(33%,33%,33%)10px;)

可以看到，具體值的順序并不重要。以下三個規則會得到完全相同的邊框效果：

h1{border-bottom:3px solid gray;}

h2{border-bottom:solid gray 3px;}

h3{border-bottom:3px gray solid;}

還可以省略一些值，使用其默認值，如下：

h3{color:gray;border-bottom:3px solid;}

由于沒有聲明任何邊框顏色，因此會應用默認值（元素的前最色）。要記住，如果沒有邊框樣式，默認樣式值none會使得邊框不復存在。

相反，如果只設置了樣式，還是會得到一個邊框。假設網站設計者只想有一個樣式為dashed的上邊框，而且希望其寬度仍為默認值medium，顏色與元素本身的文本顏色相同，在這種情況下，所需的就是以下標記（見圖8-33）:

p.roof{border-top:dashed;}另一個要注意的是，由于這些“單邊邊框”屬性只應用到一個特定的邊，所以不可能進行值復制——這是沒有任何意義的，每種值只能有一個：也就是說，只能有一個寬度值、一個顏色值和一個邊框樣式。所以網頁設計不要為同一個類型聲明多個值：

h3{border-top:thin thick solid purple;}/*cwo width values——WRONG*/

在這種情況下，整個語句都將無效，用戶代理會將其全部忽略。