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.