Border-width property

Category: Web Development & Approved by On January-31-2021 11:43:45

Border-width Property

The border-width property set the width of the element’s border.
Its syntax is: border-width: ;
Values description:

  • It defines the width of border in or Keywords. The keywords values will be thin or medium or thick.

The border-width is shorthand for:

  • border-top-width

  • border-right-width

  • border-bottom-width

  • border-left-width

Let see a syntax for all values of border-width property.
“Global value”
border-width: intital;
border-width: inherit;
border-width: unset;
“Keyword Value”
border-width: thin;
border-width: medium;
border-width: thick;
“Single value”
border-width: 10px; //applied in all direction
“Two value”
border-width: 5px 10px; // vertical | horizontal
“Three value”
border-width: 5px 10px 4px; // top | vertical | bottom
“Four value”
border-width: 5px 10px 3px 8px; //top | right | bottom | left

Here the single value will apply border width in all direction. In two value the first value apply border width in vertical and other value in horizontal direction of an element. In three value the first value apply border width in top and second in vertical direction and third value at bottom of an element. In four value the border width is apply to element side in clockwise it start from top, right, bottom and left.
Code Example:

We have made blog on CSS tutorial from basic, if you haven’t read them so Click Here


Share your thoughts about this post
web counter