border width

The border-width property in CSS is used to specify the width of an element’s border. It can be set using specific length values (e.g., pixels, ems, rems) or predefined keywords. This property can be applied to all sides of an element’s border simultaneously or to each side individually.

Syntax:-


element {
    border-width: 5px; /* you can define width according your requirement*/
}

1. Apply the same width to all four sides


p {
    border-width: 5px;
}

Apply the same width to all four sides

2. Apply different widths to each side


p {
     border-width: 2px 4px 6px 8px; /* top right bottom left */
}

Apply different widths to each side

3. Apply different widths to two sides


p {
    border-width: 2px 4px; /* top & bottom right & left */
}

Apply different widths to two sides

4. Individual sides


p {
    border-top-width: 5px;
    border-right-width: 10px;
    border-bottom-width: 15px;
    border-left-width: 20px;
}

Apply different widths to two sides