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