Shorthand Border

Contact Us or call 1-877-932-8228
Shorthand Border

Shorthand Border

The shorthand for border is shown below:

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

The shorthand for border can also be applied 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;
}
CSS Initial Values for the border Property
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:

Code Sample:

CssShorthand/Demos/Border.html
---- C O D E   O M I T T E D ----
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>

Code Explanation

The above code will render the following: Border Shorthand

Other Border Shorthand Properties

In the list of available shorthand properties, you may have noticed border-color, border-style, and border-width. These shorthand properties shouldn't be confused with the border property because their structure is different. The structure for these properties is similar to margin and padding in that you set the value for each side.

The code below shows the syntax for border-color, border-style, and border-width:

selector { border-color: Top Right Bottom Left; border-style: Top Right Bottom Left; border-width: Top Right Bottom Left; }
Next