How to Use the CSS Border Shorthand Property

See CSS: Tips and Tricks for similar articles.

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.

The shorthand for border is as follows:

selector {
border: border-width border-style border-color;
}

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
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;
}
```

Property	Initial Value
`border-width`	`medium`
`border-style`	`none`
`border-color`	inherited from a `color` property

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

How to Use the CSS Border Shorthand Property

Related Articles