CSS Outline Property

Raju Sheoran

CSS Outline

An outline is a line drawn outside the element's border.

The outline property is a line that is drawn around the elements and it is outside the border.

In today's tutorial, we will different outline properties, outline style values, and an example of using CSS Outline property:

This will be our basic boilerplate code for outline property

index.html

<!DOCTYPE html>
<html>
<head>
    <title> Outline in CSS </title>
    <style>
        
    </style>
</head>
<body>
    <p class="outlinePara"> This is a paragraph </p>
</body>
</html>

Different Outline Properties

This outline property is used to specify the style of the outline.

.outlinePara {
          outline-style: dotted;
}

ii) outline color

This property is used to set the color of the outline.

.outlinePara {
            outline-color: rebeccapurple;
}

iii) outline width

The outline-width property is used to set the width of the outline.

.outlinePara {
            outline-width: 3px;
}

iv) outline offset

This property is used to set the space between an outline and the edge or border of an element.

.outlinePara {
            outline-offset: 20px;
}

v) outline

This is the shorthand property of the outline used to set the width, style, and color of the outline.

.outlinePara {
            outline: purple solid 20px;
}

Outline Style Values

i) dotted

It define a dotted outline.

.outlinePara {
          outline-style: dotted;
}

ii) dashed

It defines a dashed outline.

.outlinePara {
             outline-style: dashed;
}

iii) solid

It define a solid outline.

.outlinePara {
             outline-style: solid;
}

iv) double

It defines a double outline.

.outlinePara {
             outline-style: double;
}

v) groove

It defines a 3D grooved outline.

.outlinePara {
             outline-style: groove;
}

vi) ridge

It defines a 3D ridged outline.

.outlinePara {
            outline-style: ridge;
}

vii) inset

Defines a 3D inset outline.

.outlinePara {
            outline-style: inset;
}

viii) outset

Defines a 3D outset outline.

.outlinePara {
            outline-style: outset;
}