html

CSS Border Shorthand Property

The shorthand properties of CSS tend to execute multiple properties simultaneously. The CSS border shorthand property allows you to change the width, style, and color of the border altogether. This article provides a demonstration on the working of border shorthand property. Moreover, various examples are illustrated to get hands-on the border shorthand property.

How border shorthand property works

The CSS border shorthand property works based on the following syntax:

selector {border: width style color;}

In the above syntax,

  • the selector can be any element, or it may refer to the class in CSS
  • the width refers to the width of the border and can be set in px, em, %. The px sets the standard and em shows the result referring to the px value. For instance, if the body has px value equals 4px then it would be equal to 1em, similarly, for 8px it would be 2em.
  • the style represents the style of the border and it can be dotted, dashed, solid, double, dash, groove, hidden, inset, outset, none.
  • the color property adds color to the borders and the color can be provided by using the exact name(red, blue), using the hexadecimal value of the color, using the RGB/RGBA pattern scheme.

The above discussion must have aided you in getting the concept of CSS border shorthand property.

How to use CSS border shorthand property

The fundamental working of the border shorthand property is provided in the above section. Here we will exercise few examples that demonstrate the usage of the CSS border property.

Example 1

The following code is practiced that applies CSS border shorthand property.

<!DOCTYPE html>

<html>

<head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title> Border -Shorthand property </title>

</head>

<style type="text/css">

        .one{

                width: 45%;

                background-color: beige;

                float: left;

                margin-right: 2px;

                border: 2px dashed darkblue;

        }

        .two{

                width: 45%;

                background-color: papayawhip;

                float: left;

                margin-left: 2px;

                border: 2px dotted red;

        }

</style>

<body>

<div class="one">

Welcome to Linuxhint

</div>

<div class="two">

        Welcome to Linuxhint

</div>

</body>

</html>

The description of the code is provided below:

  • two CSS classes are created named “one” and “two”
  • the “one” class uses border shorthand property with a width of 2px, style is dashed, and the color is darkblue
  • the “two” class practices the border shorthand property with the following values: width is 2px, style is dotted, and the border color is red
  • the other properties in class “one” and “two” refer to the div’s used in the body.
  • two div tags are used in the body, the first div tag uses a “one” class of CSS and the second div tag uses a “two” class of CSS.

The image of the code is provided below;

The output of the above code is provided below:

Example 2

The border shorthand property accepts three parameters, and their usage is provided in the above example. Here, we are considering only the “style with color” and “style with width” of the border shorthand property by using the following code.

<!DOCTYPE html>

<html>

<head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title> Border -Shorthand property </title>

</head>

<style type="text/css">

        .prim {

                border: groove lightgreen;

        }

        .sec {

                border: 4px double;

        }

</style>

<body>

<p class="prim">

        Welcome to Linuxhint

</p>

<p class="sec">

        Welcome to Linuxhint

</p>

</body>

</html>

The description of the code is provided below:

  • two CSS classes are created named “prim” and “sec”
  • the “prim” class contains the style and color of the border shorthand property
  • the “Sec” class uses the width and style
  • in the body, two paragraphs are created that are associated with each CSS class

The image of the code is shown below:

The output of the above code is shown below:

From the examples illustrated above, you would have learned the functionality of border shorthand property in various scenarios.

Conclusion

The CSS border shorthand property comprises of three border properties, border-width, border-style, and border color. This article provides a detailed guide on the CSS border shorthand property. The working of border shorthand property is briefly explained where you would get a basic understanding of this property. Furthermore, several examples are stated that implement CSS border shorthand property in various scenarios.

About the author

Adnan Shabbir