CSS Border Width

The CSS border-width property specifies the width of the four borders. This property can have from one to four values.

The value of the border-width property can be specified in pixels, ems, rems , or one of the following keywords:

Example
Try yourself 
        
            div.first {
    border-width: thin; /* Thin border */
    border-style: solid;
    width: 200px;
    height: 100px;
}
div.second {
    border-width: medium; /* Medium border (default) */
    border-style: dashed;
    width: 200px;
    height: 100px;
}
div.third {
    border-width: thick; /* Thick border */
    border-style: dotted;
    width: 200px;
    height: 100px;
}

You can use the border-width property to apply multiple values for different sides of the element using the following syntax: 

        
            element {
    border-width: top-width right-width bottom-width left-width;
}

You can specify up to four values, each representing the width of the border for the top, right, bottom, and left sides of the element, respectively. If you provide less than four values, CSS will apply the specified values in a clockwise manner, starting from the top.

Example
Try yourself 
        
            div {
   /* Applying different border widths to each side */
   border-width: 2px 4px 3px 1px;
   border-style: solid;
   width: 200px;
   height: 100px;

   /*
     The top border will be 2 pixels wide,
     the right border will be 4 pixels wide,
     the bottom border will be 3 pixels wide,
     and the left border will be 1 pixel wide.
   */
}
border-width

If you specify only two values, they will be applied to the top and bottom, with the same width for both. If you specify three values, they will be applied to the top, right, and bottom, in that order.

Example
Try yourself 
        
            div {
    /* Applying two and three values for border widths */
    border-width: 2px 4px;    /* Top and bottom are 2 pixels, right and left are 4 pixels */
    border-width: 1px 3px 2px; /* Top is 1 pixel, right is 3 pixels, bottom is 2 pixels, left is 3 pixels */
    border-style: solid;
    width: 200px;
    height: 100px;
}
Try yourself 
        
            div {
   /* Top is 1 pixel, right is 3 pixels, bottom is 2 pixels, left is 3 pixels */
   border-width: 1px 3px 1px;
   border-style: solid;
   width: 200px;
   height: 100px;
}

Using multiple values for the border-width property can be convenient when you want to set different border widths for specific sides of an element, giving you more control over the element's appearance.

Applying different border widths to the vertical and horizontal sides

Try yourself 
        
            div {
   /* Top and bottom are 2 pixels, right and left are 4 pixels */
   border-width: 2px 4px;
   border-style: solid;
   width: 200px;
   height: 100px;
}
border-width

Applying different border widths to all four sides

Try yourself 
        
            div {
   /* Top is 1 pixel, right is 3 pixels, bottom is 2 pixels, left is 3 pixels */
   border-width: 1px 3px 1px;
   border-style: solid;
   width: 200px;
   height: 100px;
}
border-width

Applying different widths to each side:

Try yourself 
        
            div {
    /* Applying different border widths to each side */
    border-top-width: 2px;        /* Top border is 2 pixels wide */
    border-right-width: 3px;      /* Right border is 3 pixels wide */
    border-bottom-width: 1px;     /* Bottom border is 1 pixel wide */
    border-left-width: 4px;       /* Left border is 4 pixels wide */
    border-style: solid;
    width: 200px;
    height: 100px;
}

Using multiple values for the border-width property allows you to fine-tune the thickness of each border side individually, giving you greater control over the appearance of the element's borders.