How to change border color with css

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.

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!