How to use css border-color property?-CSS Tutorial-php.cn

How to use css border-color property?

青灯夜游

Release： 2020-09-08 11:09:59

Original

5737 people have browsed it

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.

How to use css border-color property?

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;

Copy after login

● 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 ;

Copy after login

●The top border is red

●The left and right borders are green

●The bottom border is blue

border-color:red green;

Copy after login

● The top and bottom borders are red

● The left and right borders are green

border-color:red;

Copy after login

● 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>

Copy after login

Rendering:

How to use css border-color property?

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!