In this easy-to-follow guide, the concept of using the CSS shorthand border property will be covered with code and image examples to help guide CSS beginners through the process. If this is your first foray into using CSS shorthand, do not fret. Only basic knowledge of HTML is required to get going with the guide.
The shorthand method in CSS refers to the ability to call multiple properties as a collected form. This has two notable direct benefits for the CSS designer. First, using CSS shorthand is a great method to not only increase the speed of your working process but also a cleaner format to layout the design as well. These are also optimization cornerstones also covered in the CSS Background Shorthand post that can help enforce the shorthand usage.
Understanding Standard CSS Border Property Method
To better understand the usefulness of the CSS border shorthand property, it helps to demonstrate how the border properties are called without shorthand styling. In the code example below, you have a simple HTML page that will serve as the target of this tutorial.
<!DOCTYPE html> <html> <head> <title>CSS Border Shorthand Basics</title> <link rel="stylesheet" href="CSSBorderShorthand.css"> </head> <body> <div>Welcome to Udacity CSS!</div> </body> </html>
Now, in the next code example, you have a sample CSS stylesheet for the tutorial. The single div element is targeted to show a simple border property being applied. Some simple text alignment and spacing were also added for ease of viewing.
div {
border-color: #00ff00;
border-style: solid;
border-width: 20px;
height: 500px;
width: 400px;
font-weight: bold;
text-align: center;
}In the CSS example above, you can see that the following border properties were applied.
- border-color
- border-style
- border-width
These three items create a green border around the div element within the HTML page as shown above. In the image below, you can see the output of that code in effect.
Sure enough, this does get the desired effect in place for the page. However, this also can be done more efficiently by using the CSS shorthand border property instead. Let’s jump down and take a look at how easy this can be to utilize.
Using the CSS Shorthand Border Property method
As mentioned above, the purpose of the shorthand method is to create a more efficient and generally cleaner display of CSS work by minimizing the number of calls to various properties for the element.
With the border property, the shorthand method is simple to use. The syntax of this option is to simply call the border property with a colon and then supply the intended values as desired. A single space will provide the separation between the values in the line.
Note that you will still need to end the line with a semicolon. You can achieve this in both horizontal and vertical forms if desired. See the example below.
The Horizontal Form:
div{ border: value value value; }The Vertical Form:
div{
border:
value
value
value;
}Take a look at the sample CSS code below to see how this has been implemented in a practical form using the horizontal setup. The color has also been changed to purple via color hex code as well. Space was added in between the code for ease of reading.
div {
border: #6e00e3 solid 20px;
height: 500px;
width: 400px;
font-weight: bold;
text-align: center;
}This will provide the following output onto the sample HTML page.
In that example, it can be seen that the use of the CSS shorthand border property has reduced the number of lines required by at least three. In a sample CSS stylesheet such as this, it may not be a critical improvement right away as there is little content to look through.
However, when you take into consideration how large a detailed CSS stylesheet can grow for use in one or multiple sites; that simple space-saving method can equate to 30, 50, or hundreds of saved lines throughout.
This is where the heavy impact on readability for the CSS stylesheet comes into play. Knowing you only have to work on a single row to modify the border provides a sense of simplicity which helps with the general design flow.
Targeting a Specific Border Side
The CSS shorthand property can be tailored to customize the specified border sides in place of the entire border itself if desired. This is accomplished by adding the direction you intend to manipulate into the border property declaration.
The border sides are noted as:
- left
- right
- top
- bottom
The direction is prefixed with a hyphen. See the example code below for a direct demonstration of this. Here the “border-top” property is called to show that the top of the border is the target to work with.
div {
border-top: #fa4f00 solid 20px;
height: 500px;
width: 400px;
font-weight: bold;
text-align: center;
}In the screenshot below, you can see we have an orange border as noted by the hex code applied as a value.
As you might have noticed, this code leaves us with a missing border on the left, right, and bottom. However, that is not the case. If you leave a border color without a defined color, it simply remains at the default of white. This is important to take into account when making changes to a single side. Unless otherwise specified in the CSS stylesheet, the remaining border states are set to default, (or simply non-existent).
Pro Tip: CSS Border Color Shorthand
As a final tip to help with this shorthand usage, you have the option to also apply it with border coloring as well. In the above example, you have the single border color declared. If you want to declare multiple color sides at once, another shorthand option can be used. See the code example below to see it in use.
div {
border: solid 20px;
border-color: black red pink orange;
height: 500px;
width: 400px;
font-weight: bold;
text-align: center;
}As you can see, the CSS “border-color” shorthand was used to declare the colors of the border sides. The path the colors follow is clockwise on the border.
- black = top
- red = right
- pink = bottom
- orange = left
The screenshot below is the provided output of this CSS code in use.
Moving on To More!
If you have followed this tutorial and feel comfortable with the basics applied, perhaps it is time to marry these skills with others from the CSS toolkit. The deeper you dive into the core concepts, the wider your application with them will be.
As a good example, you can read up on the basics of using CSS background color to better understand the added functionality that can be used on a single element of a page or the entire page background itself. The CSS Content Hub is a great place to get even more of a foundation under yourself.
These small bits of the CSS puzzle add up to connect your CSS vision with reality. Simply put, the more you learn the more powerful your design skills will be. Even if it is only a bit here and there, it will all be worth it.
______________________________________
Speaking of learning more, the modern world runs on code that comes from people like you. If you are looking to go farther and be more creative than ever before, take the first steps with code.
Learning to code can help you open doors to those new possibilities of a better you. Embrace Udacity’s Intro to Programming Nanodegree program today to start that journey now. You deserve it.
