Home > Article > Web Front-end > 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!