html

CSS Outline Explained

CSS outline contains set of properties to customize the colors, styles, offset and width of the outline. The outline-color, outline-width, outline-style, and outline-offset properties of CSS outline assist in customizing outline. Apart from these, the CSS outline shorthand property provides the same functionality in a single line syntax. This article provides the detailed guide on CSS outline properties and it would serve the following learning outcomes:

  • working of CSS outline properties 
  • usage of CSS outline(with examples)

How CSS outline works

The CSS outline properties tend to perform various customizations of outline. This section provides the recommended syntax and working of all the CSS outline properties.

CSS outline (style): The syntax provided below assist in changing the outline style.

selector {outline-style: value;}
  • selector: the selector is an element or the CSS-class on which the property would be applied
  • value: The value of style can be dotted, dashed, double, solid, groove, hidden, none and more.

CSS outline (width): The width of the outline can be set using the outline-width property of CSS and can be used in the following way.

selector {outline-width: value;}

value: it accepts few predefined values such as thin, medium, and thick. The line weight for thick is 1px, for medium is 3px and for thick is 5px(all these are approximate values). Moreover, the user can also specify its value in px, em, cm, mm.

CSS outline (color): The color of the outline is defined by using the syntax.

selector {outline-color: value;}

value: this color value can be provided in numerous ways. The exact name(such as red, blue) of the color can be used, hexadecimal value of the color, RGB/RGBA pattern, invert (to make the outline visible irrespective of the background color), and HSL.

CSS outline (offset): Usually, the outline starts soon after the border, however, the offset property can be used to add space between the outline and border of an element. The syntax of offset property is:

selector {outline-offset: value;}

value: it accepts the values px, em, rem, cm, mm. The px is a static measure whereas the rem and em measures are responsive as they depend on their parent values.

CSS outline shorthand property: The CSS outline shorthand property allows to add width, color, and style to an outline of the element using a single line code. The following articles refer to the shorthand property:

selector {outline: value1 value2 value3;}

The value1, value2, and value3 relate to width, style, and color values of the outline of an element.

How to use CSS outline

This section illustrates several examples that present the usage of CSS outline-width, outline-style, outline-color, outline-offset, and outline shorthand property.

 Example 1: Using outline-width, outline-style, outline-color, and outline-offset

This example demonstrates the CSS outline properties individually by using the code shown below.

<!DOCTYPE html>

<html>

<head>

        <meta charset="utf-8">

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

        <title> Outline Property CSS </title>

</head>

 

        <style type="text/css">

                p{

                        border-style: groove;

                        border-color: black;

                        margin-bottom: 25px;

                }

                .sty{

                        outline-color: red;

                        outline-width: 2px;

                        outline-style: dashed;

                        outline-offset: 2px;

                }

                .stya{

                        outline-color: rgb(255, 100, 150);

                        outline-width: 1mm;

                        outline-style: solid;

                        outline-offset: 1mm;

                }

                .styb{

                        outline-color: #4169e1;

                        outline-width: 0.25em;

                        outline-style: dotted;

                        outline-offset: 0.25em;

                }

        </style>

<body>

        <p class="sty"> color-red, width and offset in px, style-dashed </p>

        <p class="stya"> color-rgb, width and offset in %, style-solid  </p>

        <p class="styb"> color-hex, width and offset in em, style-double </p>

</body>

</html>

The description of the code is provided below:

  • three CSS classes are created named “sty”,”stya”, and “styb”. Each class is defined to use outline-properties with various measuring units or values supported by them.
  • the “sty” class uses the red as color, width and offset is defined in px where outline-style is dashed
  • the “stya” uses RGB color, width and offset in mm, and the style is solid
  • the “styb” uses hex value of color, width and offset in em and the style is dotted
  • the paragraphs of this document are styled in “groove” with “black” color and margin-bottom of “25px”.

The image of the code is shown below:

Output:

The output contains three paragraphs, the first one uses the “sty” class, where the second and third make use of “stya” and “styb” classes.

Example 2: Using the CSS outline shorthand property

The CSS outline shorthand property allows you to implement the width, color, and style of the outline in a single line. The code provided below practices the outline shorthand property:

<!DOCTYPE html>

<html>

<head>

        <meta charset="utf-8">

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

        <title> Outline Property CSS </title>

</head>

 

        <style type="text/css">

                p{

                        border-style: groove;

                        border-color: black;

                        margin-bottom: 50px;

                }

                .outa{

                        outline: medium double green;

                }

                .outb{

                        outline: 4px solid blue;

                }

                .outc{

                        outline: thin groove;

                }

                .outd{

                        outline: dotted;

                }

                .oute{

                        outline: medium orange;

                }

        </style>

<body>

        <p class="outa"> width-medium, style-double, color-green </p>

        <p class="outb"> width-4px, style-solid, color-blue  </p>

        <p class="outc"> width-thin, style-groove </p>

        <p class="outd"> style-dotted </p>

        <p class="oute"> width-medium, color-orange</p>

</body>

</html>

The description of the code is

  • firstly, few paragraph styles are defined
  • initialized five CSS classes named “outa”, “outb”, “outc”, “outd”, and “oute” for outline shorthand property
  • the “outa” and “outb” classes use the shorthand property to set “width”, “style”, and “color” of outline
  • the “outc” and “oute” classes alters two properties whereas “outd” customizes the style

Output:


The above output shows that if the style of the outline shorthand property is not considered, you won’t be able to get the outline.

Conclusion

The CSS outline allows to alter the color, width, style, and offset value of the outline. This article provides the possible ways to exercise CSS outline properties to modify the outline. The outline-color, outline-width, outline-style, and outline-offset properties of CSS outline assist in customizing the outline. Additionally, the CSS outline shorthand property assist in changing the color, width, and style by using a single line code. For better understating, this post provides the working mechanism using the syntax. You would also get the set of examples that shows the implementation of all these properties individually and outline-shorthand as well.

About the author

Adnan Shabbir