与边框的其他方面相比，设置颜色很简单。网站建设CSS使用了一个简单属性border-color，它一次可以接受最多4个颜色值。

border-color

值：[<color>|transparent]{1,4} | inherit

初始值：对简写属性未定义

应用于：所有元素

继承性：无

计算值：见单个属性（border-top-color等）

如果网页设计的边框值小于4个，值复制就会起作用。如果设计人员希望h1元素有细的黑色上下边框，而且有粗的灰色左右边框，另外希望P元素外有中等粗细的灰色边框，就可以用以下标记，其结果见图8-28:

h1{border-style:solid;border-width:thin thick;border-color:black gray;}

p{border-style:solid;border-color:gray;}

当然一个颜色值会应用到所有4个边，前例中的段落就是如此。另一方面，如果应用了4个颜色值，那么每边都会有不同的颜色。可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和RGB值：

p{border-style:solid;border-width:thick;

border-color:black rgb(25%,25%,25%)#808080 silver;}

本章前面提到过，如果没有声明颜色，默认颜色则是元素的前景色。因此，以下声明会显示为如图8-29所示情景：

p.shadel {border-style; solid; border-width: thick; color: gray;} p.shade2 {border-style: solid; border-width: thick; color: gray; border-color: black;}

图8-29：根据元素的前景色及border-color属性值确定的边框颜色

其结果是第一段有一个灰色边框，值gray取自段落的前景色。不过，第二段有一个黑色边框，因为这是使用border-color显式指定的颜色。

还有一些单边border-color属性。其原理与单边样式和宽度属性相同。网站建设人员要为标题指定一个实线黑色边框，而且右边框为实线灰色，可以如下指定：

h1{border-style:solid;border-color:black;border-right-color:gray;}

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

值：<color>| transparent | inherit

初始值：元素的color值

应用于：所有元素

继承性：无

计算值：如果没有指定值，则使用同一元素的color属性的计算值，否则，根据指定确定

透明边框

你应该还记得，如果一个边框没有样式，就没有宽度。不过，有些情况下网页制作人员可能想创建一个不可见的边框。这就引人了边框颜色值transparent（在CSS2中引入）。这个值用于创建有宽度的不可见边框。

假设你希望包含3个链接的一组链接有边框，默认地这些边框不可见，不过，鼠标停留在链接上时边框要凸起。为此可以让边框在链接处于非悬停状态下透明：

a:link, a:visited {border-style: solid; border-width: 5px; border-color: transparent;} a:hover {border-color: gray;}

从某种意义上说，利用transparent，使用边框就像是额外的内边距一样，此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区（假设有可见的背景）。

警告：在IE7之前，IE/Win没有提供对transparent的支持。在以前的版本中，IE会根据元素的color值来设置边框颜色。