Tutorial on using CSS border-width property

border-width -- Define the width of the four borders Value:{1,4} | inherit {1,4}: border width (can have one, two, three or four values) inherit:Inherit Initial value: medium Inheritance: No Applies to: all elements border: border, width: width. The value of border-width thin: border-width -- Define the width of four borders
Values:{1,4} | inherit
{1,4}: border width (can have One, two, three or four values)
inherit: inheritance
Initial value: medium
Inheritance: No
Applies to: all elements
border: border, width: width .
Border-width value
thin: thin
medium: medium
thick: thick
: length representation
The above width value has the following relationship : thin
Tips: border-width cannot use percentages and cannot take negative values, only length. (for example: px, em, etc.)!

Example
Specify four values ​​for border-width
border-width:border-top-width border-right-width border-bottom-width border-left-width;
p#fourborders
{
border-width:thick medium thin 12px;
}
If four values ​​are defined, then the four values ​​are top and right respectively. , the width value of the bottom and left borders (starting from the top border and traversing in clockwise order).

Equivalent to the following definition

p#fourborders
{
border-top-width:thick;
border-right-width:medium;
border-bottom-width:thin;
border-left-width:12px;
}
is border -width specifies three values ​​
border-width:border-top-width border-right-width/border-left-width border-bottom-width;
p#threeborders
{
border- width:thick 12px thin;
}
If only three values ​​are defined, the middle value represents the width of the left and right borders.

Equivalent to the following definition

p #threeborders
{
border-top-width:thick;
border-right-width:12px;
border-bottom-width:thin;
border-left-width:12px;
}
Specify two values ​​for border-width
border-width:border-top-width/border-bottom-width border-right-width/border-left-width;
p# twoborders
{
border-width:thick 12px;
}
If you define only two values, the former value represents the width of the upper and lower borders, and the latter value represents the width of the left and right borders.

Equivalent to the following definition

p#twoborders
{
border-top-width:thick;
border-right-width:12px;
border-bottom- width:thick;
border-left-width:12px;
}
Specify a value for border-width
border-width:border-top-width/border-bottom-width/border- right-width/border-left-width;
p#oneborders
{
border-width:thick;
}
If only one value is defined, this value represents the four sides Width.

Equivalent to the following definition

p#oneborders
{
border-top-width:thick;
border-right-width:thick;
border-bottom-width:thick;
border-left-width:thick;
}

The above is the detailed content of Tutorial on using CSS border-width property. For more information, please follow other related articles on the PHP Chinese website!