CSS Border Shorthand

A lot of front-end developers are probably already familiar with CSS shorthand properties. They help you write less code and provide smaller files for users. One CSS property that’s worth mentioning is CSS border shorthand. This CSS property allows you to specify all four borders in one line of CSS code!

When using the border shorthand, you write one line of CSS code to specify all four borders. The border shorthand property is very useful when you need to set multiple values for each property.

What is CSS Border Shorthand property:

The border shorthand property allows you to specify all four borders in one line of CSS code. The syntax looks like this: “border: top bottom right left;” For example, if we wanted a rectangle shape with a 1px solid dark green border on all sides it would look something like this: “border-style:solid; border-color:#006088; border-width:1px;”.

Writing less CSS:

Using border shorthand instead of specifying four lines, we can write the above style in just one line. This is a commonplace where border shorthand comes in handy, and you may want to consider it when working on your next project. To achieve this with CSS borders requires only two properties, border-width and color. This is because the other borders: top, bottom, right and left automatically inherit the values of their counterparts.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Border Shorthand</title>
<style type="text/css" media="screen">
div {
	margin: .75em;
	padding: .5em;
    width:100px;
    height:100px;
    }
    
    div.one {
    	border: 1px solid yellow; 
    }
    
    div.two {
    	border-top: 1px solid brown; 
    	border-right: 2px solid brown;
    	border-bottom: 3px solid brown; 
    	border-left: 4px solid brown;
    }
    
    div.three {
    	border: solid; 
    }
    
    div.four {
    	border: 1px #444444; 
    }
    </style>
    </head>
    
    <body>
    	<div class="one"></div>
    	
    	<div class="two"></div>
    	
    	<div class="three"></div>
    	
    	<div class="four"></div>
    </body>
    </html>

What does CSS border shorthand mean?

CSS Shorthand Example: Using CSS, we can write it like this “border: 0px solid green;”. Since all four sides require a border color, border-style and border width, we can write CSS in one line.

How to use CSS border shorthand:

To summarize, the CSS borders shorthand property is a great way to create a rectangle shape with a solid colored dark green color on all four sides by using only two properties instead of six, which makes it easier for you and the user.

Syntax:

border: px solid #333333;

Example 1:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Shorthand</title>
<style type="text/css" media="screen">
div {
	margin: .75em;
	padding: .5em;
    width:100px;
    height:100px;
    }
    
    div.one {
    	border: 1px solid blue; 
    }
    
    div.two {
    	border-top: 1px solid blue; 
    	border-right: 2px solid blue;
    	border-bottom: 3px solid blue; 
    	border-left: 4px solid blue;
    }
    
    div.three {
    	border: solid; 
    }
    
    div.four {
    	border: 1px #00f; 
    }
    </style>
    </head>
    
    <body>
    	<div class="one"></div>
    	
    	<div class="two"></div>
    	
    	<div class="three"></div>
    	
    	<div class="four"></div>
    </body>
    </html>

Example 2:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Border Shorthand</title>
<style type="text/css" media="screen">
div {
	margin: .75em;
	padding: .5em;
    width:100px;
    height:100px;
    }
    
    div.one {
    	border: 1px solid red; 
    }
    
    div.two {
    	border-top: 1px solid red; 
    	border-right: 2px solid red;
    	border-bottom: 3px solid red; 
    	border-left: 4px solid red;
    }
    
    div.three {
    	border: solid; 
    }
    
    div.four {
    	border: 1px #444444; 
    }
    </style>
    </head>
    
    <body>
    	<div class="one"></div>
    	
    	<div class="two"></div>
    	
    	<div class="three"></div>
    	
    	<div class="four"></div>
    </body>
    </html>

Now it’s up to you what you want to use. Hopefully, this article will help you. The blog post was about the Border Shorthand Property and how you can use it to decrease the file size of your CSS stylesheet.

Conclusion:

With the CSS border Shorthand property, you can set all four borders in one line of code. This is a powerful shorthand that saves time and provides smaller files for users. If this sounds like something you’d want to implement into your next design project, let us know! Our team would be happy to help with any questions about how it works or brainstorm ideas on what other innovative properties may work best for you. Which CSS border property have you used?

Also, read: Horizontal List CSS

Find us on Facebook

Leave a Comment