是的，我們知道：我們可以為border設定它的width，這個border的寬度可以是5px，可是10px，可以是20px，可以是隨意數值。
可是，你想像過可以為每1px的border單獨設定顏色麼？這是個什麼概念？就是說，如果你為一個元素設定了10px的border，那麼這10px的邊框區域，你可以為它設定10種顏色。每1px是一重（一組）。 DEMO：css3 border-colors多組邊框色詳解
恩，讓我們來回味下如何為元素設定邊框大小（程式碼區塊一）：
上面的程式碼表示我們為一個className為test的div元素定義了6px的邊框，當然，這是一個矩形，包括有4條邊。
於是，這段CSS程式碼其實可以細化為（程式碼區塊二）：
透過細化後的程式碼，發現我們其實可以給這個矩形的4條邊分別設定顏色，至於顏色是要設定成相同還是不同，則要看自己的需求了。
運行細化後的程式碼（當然你可以更改每條邊的顏色），看到的是一個有6px黑色邊框的矩形。恩，這就是我們的預期效果。
然而，現在，我們可以將6px的邊框拆分成6組，每1px為1組，於是每條邊框最多可以設定6中不同的顏色。
怎麼做？看看吧（程式碼區塊三）：
.test{
border-width:6px;
border-style:solid;
border-top-colors:#000 #fff #999 #aaa #ccc #eee;
border-right-colors:#000 #fff #999 #aaa #ccc #eee;
border-bottom-colors:#000 #fff #999 #aaa #ccc #eee;
border-left-colors:#000 #fff #999 #aaa #ccc #eee;
}
.test{
border-width:6px;
border-style:solid;
border-top-color:#000;
border-right-color:#000;
border-bottom-color:#000;
border-left-color:#000;
}
.test{
border:6px solid #000;
}
<div class="test">測試border顏色設定</div>