How to use CSS border-color property_CSS tutorial_CSS_Web page production

border-color -- Define the color of the four borders Value:[ | transparent ]{1,4} | inherit {1,4}: color representation transparent{1,4}: transparent inherit: Inherit Initial value: Same as the default value of colorproperty Inheritance: No Applies to: all elements border: border, color: color. border-colo border-color -- Define the color of the four borders
Values: [ | transparent ]{1,4} | inherit
{1,4}: Color representation
transparent{1,4}: Transparent
inherit: inheritance
Initial value: the same as the default value of the color attribute
Inheritance: No
Applicable to: all elements
border: border, color : Color. The assignment methods of
border-color and border-width are the same, and you can assign 1, 2, 3 or 4 color values ​​respectively.

Example
p#fourborders
{
border-color:red black blue green;
}
If four values ​​are defined, then these four values ​​are the top, right, bottom, and left borders (from Starting from the upper border and traversing in clockwise order). The upper border of the Dream City paragraph is red, the right border is black, the lower border is blue, and the left border is green.

p#threeborders
{
border-color:red black blue;
}
If only three values ​​are defined, the middle value represents the left and right borders. Define the upper border of the Dream City paragraph to be red, and the lower border to be Blue, left and right borders are black.

p#twoborders
{
border-color:red black;
}
If only two values ​​are defined, the previous value Represents the top and bottom borders, and the following values ​​represent the left and right borders. Define the top and bottom borders of the Dream City paragraph as red, and the right and left borders as black.

p#oneborders
{
border-color :red;
}
If only one value is defined, this value represents the four sides. Define the border of the Dream City paragraph to be red.

Script House Tips: When no border is set When the color is border-color, the color of the border uses the value of the color attribute of this element.

p#bordercolor
{
border-bottom:solid;
color :red;
}
In the above example, since the value of border-color is not set, the value of color is taken as red.

css border-color attribute example--use the color value of color .

Script Home Tips: Since CSS properties have overwriting characteristics, the order of setting is very important.

p
{
border:medium solid green;
border-bottom:solid;
color:red;
}
In the above example, the color of the lower border is red, OthersThe border is green. Because border-bottom has no color set, So the color specified by color should be taken.

The above is the detailed content of How to use CSS border-color property_CSS tutorial_CSS_Web page production. For more information, please follow other related articles on the PHP Chinese website!