Shorthand to set the 3 properties:
element { border: border-width border-style border-color ;}
This shorthand is equivalent to the following:
element { border-width: length | thin | medium | thick | inherit ; border-style: style ; border-color: color ; }
Alternatively you can choose to inherit from a parent element: border: inherit ;
These three properties are themselves shorthand properties, for example border-style can set different styles for top, bottom, left and right borders. If you use the border shorthand it will set all 4 to the same value.
The Border-Style property must be set for the Border-Width or Border-Color properties to have any effect.
The default property values, any value that is not specified in the shorthand will be set to the default:
border-width: medium; border-style: none; border-color: 0;
Examples
Set the border of H1 to a 2px solid green line:
h1 {border: 2px solid green ;}
Try it:
This is a sample of text with a CSS border. Each of the 4 borders can be styled together or separately with CSS. |
Browser Support: All major browsers (CSS 1) Web browsers will interpret the shortcut values in any order.
“I am the kind of person who doesn't recognize borders. I don't understand why we think it is okay to keep someone within one border when they are unable to feed their family when they could be getting help somewhere else. I don't see people as different so I don't understand the idea of borders in this world” ~ Angelina Jolie
Related:
border - MDN Web Docs.
border-bottom - Shorthand to set all the border-bottom properties.
border-left - Shorthand to set all the border-left properties.
border-right - Shorthand to set all the border-right properties.
border-top - Shorthand to set all the border-top properties.
The CSS Box Model