边框颜色css怎么设置-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

在css中，可以利用border-color、border-top-color、border-bottom-color、border-left-color、border-right-color属性来设置元素的边框颜色。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css设置边框颜色的属性

属性	描述
border-bottom-color	设置一个元素的底部边框颜色。
border-left-color	设置一个元素象的左边边框颜色。
border-right-color	设置一个元素的右边边框颜色。
border-top-color	设置一个元素的顶部边框颜色
border-color	设置一个元素的四个边框颜色。

border-color属性是一个简写属性，可以在一个声明中设置四个边框颜色，可设置 1 到 4 种颜色。

该属性可设置一个元素的所有边框中可见部分的颜色，或者为 4 个边分别设置不同的颜色。

实例：

1	`border-color:red green blue pink;`

上边框是红色
右边框是绿色
下边框是蓝色
左边框是粉色

1	`border-color:red green blue;`

上边框是红色
右边框和左边框是绿色
下边框是蓝色

1	`border-color:dotted red green;`

上边框和下边框是红色
右边框和左边框是绿色

1	`border-color:red;`

所有 4 个边框都是红色

示例1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p.one
{
    border-style:solid;
    border-color:#0000ff;
}
p.two
{
    border-style:solid;
    border-color:#ff0000 #0000ff;
}
p.three
{
    border-style:solid;
    border-color:#ff0000 #00ff00 #0000ff;
}
p.four
{
    border-style:solid;
    border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>
 
<body>
<p class="one">单色边框！</p>
<p class="two">双色边框！</p>
<p class="three">三色边框！</p>
<p class="four">四色边框！</p>
</body>
</html>