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

How to change border color with css

藏色散人
藏色散人Original
2021-04-13 09:04:584479browse

In CSS, you can set the color of the four borders through the border-color attribute. This attribute can set 1 to 4 colors. Its usage syntax is such as "border-color:red green blue pink;"; this attribute is A shorthand property that sets the color of the visible portion of all borders of an element.

How to change border color with css

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

border-color property sets the color of the four borders. This property can set from 1 to 4 colors.

The border-color property is a shorthand property that can set the color of the visible parts of all borders of an element, or set different colors for each of the 4 sides. Please look at the following example:

Example 1

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

Example 2

border-color:red green blue;

The upper border is red

The right and left borders are green

The lower border is blue

Example 3

border-color:dotted red green;

The upper and lower borders are red

The right and left borders are green

Example 4

border-color:red;

All The four borders are all red

Remember that the border style cannot be none or hidden, otherwise the border will not appear.

Note: Please always declare the border-style attribute before the border-color attribute. The element must get a border before you can change its color.

【Recommended learning: css video tutorial

The above is the detailed content of How to change border color with 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 javascript software?Next article:Is javascript software?