In this section, we will learn what the border property is and how to use it in CSS.

Click here to run the example of border property.

CSS border Property Definition and Usage

The `border` property is a shorthand CSS property that gives us the ability to declare values for three other CSS properties all in on declaration.

These three properties are:

• border-width: explained in border-width section
• border-style: explained in border-style section
• border-color: explained in border-color section

CSS border Property Syntax

border: color style width;

Note: the position of these three values doesn’t matter at all. You can put width then style and then color or change it to first style and then color and last width, etc.

CSS border Property Value

The border property takes the values that we could use in border-color, border-style, and border-width.

Example: border in CSS

See the Pen border in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: div with border

See the Pen div with border by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: CSS Button Border

See the Pen CSS Button Border by Enjoy Tutorials (@enjoytutorials) on CodePen.