How to Use the CSS Border Shorthand Property

  • google plus

In Brief...

Shorthand properties can take multiple values, allow you to write less code, and provide smaller files for the user to download. Find out how to use the CSS border shorthand property in these steps.

Take our Ajax Training course for free.

See the Course Outline and Register

Instructions

  1. The shorthand for border is as follows:
    selector {
    border: border-width border-style border-color;
    }
  2. You can also apply the shorthand for border individually to border-top, border-right, border-bottom, and border-left. For example, the following syntax demonstrates the shorthand structure applied to a border-top property:
    selector {
    border-top: border-width border-style border-color;
    }
    The CSS initial values for the border property are shown in the following table:
    Property Initial Value
    border-width medium
    border-style none
    border-color inherited from a color property
  3. In addition to the border property, there are a few other shorthand properties, as indicated in the previous table. They are border-color, border-style, and border-width. Their structure is different from the border property. The structure is actually similar to margin and padding properties in that you set the value for each side, as shown in the following syntax
    selector {
    border-color: Top Right Bottom Left;
    border-style: Top Right Bottom Left;
    border-width: Top Right Bottom Left;
    }
  4. The following example demonstrates the use of the border shorthand property:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>CSS Border Shorthand</title>
    <style type="text/css" media="screen">
    div {
    	margin: .75em;
    	padding: .5em;
    }
    
    div.one {
    	border: 1px solid blue; /* This sets the border value to a solid blue border with a width of 1px. */
    }
    
    div.two {
    	border-top: 1px solid blue; /* This sets a solid blue border with a width of 1px on the top . */
    	border-right: 2px solid blue; /* This sets a solid blue border with a width of 2px on the right. */
    	border-bottom: 3px solid blue; /* This sets a solid blue border with a width of 3px on the bottom. */
    	border-left: 4px solid blue; /* This sets a solid blue border with a width of 4px on the left. */
    }
    
    div.three {
    	border: solid; /* This border uses the initial values for color and width. */
    }
    
    div.four {
    	border: 1px #00f; /* No style is set for this border so it will not display. */
    }
    </style>
    </head>
    
    <body>
    	<div class="one">The border around this text will be solid blue with a width of 1px.</div>
    	
    	<div class="two">The border around this text is using shorthand for each individual side.</div>
    	
    	<div class="three">The border around this text will use the initial values for color and width.</div>
    	
    	<div class="four">No border will show as the border-style has not been set.</div>
    </body>
    </html>
    This code renders the following:
    Border Shorthand

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss