Border Shorthand Property

Category: Web Development & Approved by On February-03-2021 10:12:48

Border Shorthand Property

The border shorthand property set the border-width, border-color, and border-style to an elements border. If you want to set different values to all four border, then use their long way method. This property sets the values of other property other than width, color and style to its initial.
Its syntax is: border: <width> <style> <color> value;
Values description:

  • <width>
    Set the thickness of the border. Its default value is medium if not set.

  • <style>
    Set the style of the border. Its default value is none if not set.

  • <color>
    Defines the color of border. Value of color can be select in all format as color names, HEX code, RGB value and other. Its default value is currentcolor if not set.

The border-color is shorthand for:

  • border-width

  • border-style

  • border-color

Let see a syntax for all values of border-color property.
“Global value”
border: intital;
border: inherit;
border: unset;

border: 5px; //only width
border: 5px solid; // width | style
border-color: 5px solid #ff0000; // width | style | color

Code Example:

We have made blog on CSS tutorial from basic, if you haven’t read them so Click Here


Share your thoughts about this post
web counter