Home > Article > Web Front-end > How to use css border-color property?
How to use css border-color property?
- 青灯夜游Original
- 2019-02-21 13:24:375708browse
The border-color attribute is a shorthand attribute that can be used to set the color of all four borders of an element, or to set different colors for the four sides.
CSS border-color property
Function: border-color property Used to set the border color of an element. You can set 1 to 4 values:
border-color:red green blue pink;
● The upper border is red
●The right border is green
●The lower border is blue Color
●The left border is pink
border-color:red green blue ;
●The top border is red
●The left and right borders are green
●The bottom border is blue
border-color:red green;
● The top and bottom borders are red
● The left and right borders are green
border-color:red;
● All four borders are red
Note: The border-style attribute needs to be declared before the border-color attribute, because the element must obtain a border before changing its color. And the value of the border-style attribute cannot be none or hidden, otherwise the border will not appear and the border-color attribute will not take effect.
Example of using CSS border-color property
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
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>
<p><b>注：</b>"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
</body>
</html>Rendering:
The above is the entire content of this article, I hope it will be helpful to everyone's study.
The above is the detailed content of How to use css border-color property?. For more information, please follow other related articles on the PHP Chinese website!