CSS border-width Property


The border-width property in CSS is used to set the border width of all the four sides of an element. The border-width property is the combination of four property

The border-width property sets the width of an element's four borders. This property can have from one to four values.

Examples:

  • border-width: thin medium thick 10px;
    • top border is thin
    • right border is medium
    • bottom border is thick
    • left border is 10px

  • border-width: thin medium thick;
    • top border is thin
    • right and left borders are medium
    • bottom border is thick

  • border-width: thin medium;
    • top and bottom borders are thin
    • right and left borders are medium

  • border-width: thin;
    • all four borders are thin

Note: Always declare the border-style property before the border-width property. An element must have borders before you can set the width.

Syntax: 
border-width: length|thin|medium|thick|initial|inherit

Property Values:

  • length: It is used to set the width of the border. It does not takes negative value.
  • thin: It is used to set the thin border at the top of element.
  • medium: It is used to set medium sized top border. It is the default value.
  • thick: It is used to set the thick top border.
  • initial: It is used to set the border-top-width to its default value.
  • inherit: This property is inherited from its parent.

Example -