border shorthand

In CSS, the border shorthand property allows you to define the width, style, and color of an element’s border in a single declaration. Here is the general syntax and some examples:

Syntax:


border: [border-width] [border-style] [border-color];

Examples:

1. A solid red border with 2px width


p {
    border: 2px solid red;
}

A solid red border with 2px width

2. A solid black border with medium width


p {
     border: solid;
}

A solid black border with medium width

Individual Borders:

You can also set the border for individual sides using these properties:


border-top: 1px solid black;
border-right: 2px dotted red;
border-bottom: 3px dashed blue;
border-left: 4px double green;

Example: Combining Styles


p {
    border-top: 2px solid red;
    border-right: 4px dotted green;
    border-bottom: 6px dashed blue;
    border-left: 8px double purple;
}

Example of Combining Styles

border shorthand – Interview Questions

Q 1: What is border shorthand?

Ans: A single property defining width, style, and color.

Q 2: Syntax of border shorthand?

Ans: border: 2px solid red;

Q 3: What is the advantage of shorthand?

Ans: Cleaner and shorter code.

Q 4: Is order important in shorthand?

Ans: No, but all values must be valid.

Q 5: Can shorthand be used for individual sides?

Ans: Yes, like border-top.