CSS border-color

 CSS border-color is used to set the border color. For example, it is often used to set the border color of DIV or span . It can set the color of four borders at a time, or set the color of each border separately, and also can match the border- style (border style), border-width (border width) to present different styles. It should be noted that if the border width is zero (border-width:0px), the border style is none or hidden (border-style: none or border -style: hidden) will not display the border color.

CSS border-color basic syntax

description	grammar
Set the colors of four borders at once	border-color: color;
Set the color of the four borders separately	border-color: top border color, right border color, bottom border color, left border color;
Set the upper and lower borders and the left and right borders separately	border-color: the color of the upper and lower borders, the color of the left and right borders;

There are three commonly used grammatical techniques in the above table. If the colors of the four borders are the same, use the first simple grammar to specify the colors of the four sides at a time. It will be easier to manage in the future. If you want to design four sides If they are all different colors, the second syntax must be used. The colors are top, right, bottom, and left in order. This is the standard order of CSS and cannot be changed.

CSS border-color example 1. Set the colors of the four borders to be the same

<div style="border-color:#aaaaee;border-width:3px;border-style:solid;padding:5px;">
test that all four sides are the same color
</div>

The output of the above example is

Test that all four sides are the same color

The most important thing in the above example is "border-color:#aaaaee;" to set the color of the border. You can also use the color code table to find other different colors (open the color code table ), and we also use border- width to increase the width of the border , border-style to display the border style, and padding to increase the distance between the text and the border, these properties are only used to make the example more clearly presented, and also let the browser know the style we want to present.

CSS border-color example two, set the color of each border separately, the syntax is as follows

<div style="border-color:blue red green yellow;border-width:3px;border-style:solid;padding:5px;">
test four sides are all different colors
</div>

The example presents the results as

Test the four sides are different colors

It means that the top border is blue, the right border is black, the bottom border is red, and the left border is green. If the top and bottom are the same color, and the left and right are the same color, you can also use a simplified way of writing. Take a look at the example below to understand immediately.

CSS border-color example 3: Borders with the same color on the top and bottom and the same color on the left and right

<div style="border-color:blue yellow;border-width:3px;border-style:solid;padding:5px;">the
same color up and down and the same color on the left and right borders
</div>

The example presents the results as

Borders of the same color on the top and bottom and the same color on the left and right

In the example, "border-color:blue yellow;" means that the upper and lower borders are blue, and the left and right borders are yellow. The value of border-color is not necessarily in English, you can directly give the color code (usually this is also the case). In addition, the value of border-color is transparent, which represents a transparent border, but it is not in IE6 or older IE versions. Support, so try not to use it. If you don't want to display the border, you can directly use border-width or border-style to achieve.