The border shorthand property sets the same width, style, color, and image for all four borders of a box. Unlike the padding and margin shorthand properties, the border property cannot set different values for the different sides of a border. The syntax of the border shorthand is as follows:
border: <border-width> <border-style> <color> transparent inherit
For example, the following CSS rule:
div { border: solid red; }
sets a medium (the default initial value) red border for all sides of the div. This is equivalent to:
div {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red;
}
You can set the border style for all four sides of a box, and then set one or two sides to save space. For example:
#nav div {
border: 1px solid #fc0;
border-right: 1px solid #c30;
border-bottom: 1px solid #c30;
}
You can also do this in another way by using defaults:
#nav div {
border-width: 1px; /* defaults to solid */
border-color: #fc0 #c30 #c30 #fc0;
}
Plus, you can zero out a border on one or more sides by specifying a zero width. For example:
p {
border: 1px double red;
border-width: 1px 0 0 1px;
}
Note that if you omit a property, the border shorthand uses the initial value of the property. So, if a color is specified and you use border:solid;, the browser will use the default medium solid border, with a color specified in the color property.