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

border width – Interview Questions

Q 1: What is border-width?

Ans: It defines the thickness of the border.

Q 2: What units are used for border-width?

Ans: px, em, rem.

Q 3: Can border-width have multiple values?

Ans: Yes, for top, right, bottom, left.

Q 4: Is border-style required?

Ans: Yes, otherwise the border won’t appear.

Q 5: Default border width value?

Ans: Medium.