Home > Article > Web Front-end > How to set border color css

How to set border color css

青灯夜游Original: 2021-07-14 13:50:002520browse

In CSS, you can use the border-color, border-top-color, border-bottom-color, border-left-color, and border-right-color properties to set the border color of the element.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css property for setting border color

Property	Description
border-bottom-color	Set the bottom border color of an element.
border-left-color	Set the left border color of an element icon.
border-right-color	Set the right border color of an element.
border-top-color	Set the top border color of an element
border-color	Set the four border colors of an element.

#The border-color property is a shorthand property that can set four border colors in one statement, and can set 1 to 4 colors.

This property can set the color of the visible parts of all borders of an element, or set different colors for the 4 sides.

Example:

border-color:red green blue pink;

The upper border is red
The right border is green
The lower border is blue
The left border is pink

border-color:red green blue;

The upper border is red
The right and left borders are green
The lower border is blue

border-color:dotted red green;

The upper and lower borders are red
The right and left borders are green

border-color:red;

all 4 The borders are all red

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

How to set border color css

Example 2:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p.four
{
	border-style:solid;
	border-top-color:#ff0000;
	border-bottom-color:#0000ff;
	border-left-color:rgb(250,0,255);
	border-right-color:#00ff00;
}
</style>
</head>

<body>

<p class="four">四色边框！</p>
</body>
</html>

How to set border color css

CSS Color

In css, the color value can use color name, percentage, number and hexadecimal value, there are four A way of writing.

1) Use color names

Although there are currently about 184 named colors, they are truly supported by various browsers and serve as CSS specifications There are only 16 recommended color names, as shown in the table below.

##blackPure blacksilverLight graynavyDark blue##blue##tealIndigoaqua天蓝maroonCrimson大红##oliveBrown Yellowyellow明黄grayDark GraywhiteShell White

不建议在网页中使用颜色名，特别是大规模的使用，避免有些颜色名不被浏览器解析，或者不同浏览器对颜色的解释差异。

2) 使用百分比

这是一种最常用的方法，例如：

color: rgb(100%, 100%, 100%);

这个声明将红、蓝、绿 3 种原色都设置为最大值，结果组合显示为白色。相反，可以设置rgb(0%, 0%, 0%)为黑色。3 个百分值相等将显示灰色，同理哪个百分值大就偏向哪个原色。

3) 使用数值

数字范围从 0~255，例如：

color: rgb(255, 255, 255);

上面这个声明将显示白色，相反，可以设置为rgb(0, 0, 0)，将显示黑色。3 个数值相等将显示灰色，同理哪个数值大哪个原色的比重就会加大。

4) 十六进制颜色

这是最常用的取色方法，例如：

color: #ffffff;

其中要在十六进制前面加一个#颜色符号。上面这个声明将显示白色，相反，可以设置#000000为黑色，用 RGB 来描述：

color: #RRGGBB;

从 0~255，实际上十进制的 255 正好等于十六进制的 FF，一个十六进制的颜色值等于 3 组这样的十六进制的值，它们按顺序连接在一起就等于红、蓝、绿3种原色。

（学习视频分享：css视频教程）

Table 1: Color names recommended by CSS specifications
Name	Color	Name Name	Color	Name	Color

Light blue	green	Dark Green	lime	Light Green
					##red
purple	Deep Purple	fuchsia	Magenta

The above is the detailed content of How to set border color css. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Is css a programming language?Next article：Is css a programming language?

See more

How to set border color css

Related articles