Call (877) SITE-OPT (748-3678)

Code: Border shorthand property

From Chapter 7: CSS Optimization

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.

Copyright © 2002-2017 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: February 19, 2009.

Follow us on: Twitter, Google+, Facebook, Linked In