How to Use the CSS Border Shorthand Property

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.

  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:
    <meta charset="UTF-8">
    <title>CSS Border Shorthand</title>
    <style type="text/css" media="screen">
    div {
    	margin: .75em;
    	padding: .5em;
    } {
    	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. */
    	<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>
    This code renders the following:
    Border Shorthand
Author: Chris Minnick

Chris Minnick, the co-founder of WatzThis?, has overseen the development of hundreds of web and mobile projects for customers from small businesses to some of the world’s largest companies. A prolific writer, Chris has authored and co-authored books and articles on a wide range of Internet-related topics including HTML, CSS, mobile apps, e-commerce, e-business, Web design, XML, and application servers. His published books include Adventures in Coding, JavaScript For Kids For Dummies, Writing Computer Code, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW E-Commerce Designer Certification Bible, and XHTML.

About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.