CSS3中有關於Border的屬性一共有三個：設計圓角border-radius，設計邊框背景border-image,設計多色邊框border-color。
現在我們來說一說設計多色邊框border-color屬性；那么在CSS3中這個屬性又有什么不同之處呢？又將如何使用呢？在CSS2中，我們可以把border-color同時應用到不同的邊框上，也可以分別在各邊上色，如：
border-color: <color>/*其中可以上一個值，也可以是多個值，具體我在這里不多說了，大家用到的也特別多*/ /*我們可以分別給各邊上色*/ border-top-color: <color>/*給上邊框上色*/ border-right-color: <color> /*給右邊框上色*/ border-bottom-color:<color> /*給下邊框上色*/ border-left-color: <color> /*給左框上色*/
上面展示的是給元素邊框上色的方法，大家都知道這樣可以給邊框上唯一色。可是如果想給邊框添加不同的顏色，如果想添加漸變色或彩色我們就需要CSS3的border-color屬性，不過到目前為止只有Firefox 3.0+的瀏覽支持這個屬性。也是因為這一點，css3的border-color應用是相當的少，據我的了解，目前還沒有發現有項目應用css3的border-color來實現邊框特殊效果。但這一點都不會影響我們這些css3的愛好者學習css3各種屬性的熱情。下面我們就繼續，看看css3的bborder-color是如何使用。
前面我們說過CSS3的border-color目前只有Mozilla的Firefox3.0+瀏覽器支持，所以我們有必要在前面加上其前綴“-moz-”。現在我們來看看其語法的書寫規則：
-moz-border-top-colors: <color> <color> <color>*; /*頂邊邊框*/ -moz-border-right-colors:<color> <color> <color>*; /*右邊邊框*/ -moz-border-bottom-colors: <color> <color> <color>*; /*底邊邊框*/ -moz-border-left-colors: <color> <color> <color>*; /*左邊邊框*/
從上面的語法規則來看，我們把元素四邊分開了書寫，但這里有一點和CSS2的不同之處，在CSS3中我們使用的是border-top-colors,border-right-colors,border-bottom-colors,border-left-colors，當中的colors是個復數，而在CSS2中都是border-top-color,border-right-color,border-bottom-color,border-left-color。這一點大家一定要記住了，在CSS3中是“colors”因為我們是應用多色。這里大家一定會問，我們假如在各邊應用的顏色相同時，能不能不分開寫呢？直接寫成：
-moz-border-colors: <color> <color> <color> <color>*;/*這樣縮寫能行嗎？*/
針對這點，我要大聲的告訴大家，上面的寫法是錯誤的，我們不能像css2中的border-color這樣縮寫。如果縮寫的話，是沒有任何效果的。希望大家要記住這個不同之處，以免造成沒有任何效果顯示。
上面我們介紹了CSS3的border-color與CSS2中的border-color在語法上的不同之處，下面我們接着來看看其取值上的不同之處。
使用css3的border-color屬性時，如果你的boder寬度設置了X px,那么你可以在這個邊框上使用X種顏色，此時每一個顏色就是一個px。如果你的border寬度設置了10px，而你只運用了三四個顏色，那么最后一個顏色將會填充到后面的寬度上。
下面我們來看一個簡單的實例：
.div { width: 200px; height: 100px; border: 5px solid transparent; -moz-border-top-colors: red blue white white black; -moz-border-right-colors: red blue white white black; -moz-border-bottom-colors: red blue white white black; -moz-border-left-colors: red blue white white black; }
效果如下所示：
我們還可以利用這個屬性制作漸變的邊框效果
.demo1 { width: 200px; height: 100px; border: 10px solid transparent; border-radius: 15px 0 15px 0; -moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303; -moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303; -moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303; -moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303; }
效果如下圖所示：
CSS3中的border-color相對於前面介紹的CSS3屬性來說比較簡單點，所以今天也簡單介紹了一下其使用的方法，以及取值的細節之處。最后在提醒大家一點，到目前只有Firefox3.0版本以上的瀏覽器才能支持，所以此屬性的應用范圍相對來說很少，幾乎來說沒什么地方使用。如果只是學習的話，還是可以試試效果。如果需要應用到項目中的話，還是時機不成熟。