Outlining the content in CSS

CSS Outlining: Here, we are going to learn about the outlining in CSS, how to outline the content in CSS?
Submitted by Anjali Singh, on November 04, 2019

CSS Outlining

Outline is a line that goes around the element, outside of the border.

In contrast to border, outlines do not take any space in the box model. Adding an outline to an element does not affect the position of that element or other elements.

The essential properties of outline are outline-color, outline-style and outline-width.

Syntax:

    Element{
        Outline:outline-color outline-style outline-width;
    }

Some common outline properties and their values,

Parameter	Details
dotted	dotted outline
dashed	dashed outline
solid	solid outline
double	double outline
groove	grooved outline, it depends on the outline-color value
ridge	ridged outline, it depends on the outline-color value
inset	inset outline, it depends on the outline-color value
outset	outset outline, it depends on the outline-color value
none	no outline
hidden	hidden outline

Outline style

The outline-style property is used to set the style of the outline of an element.

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        p.p1 {
            border: 1px solid black;
            outline-color: red;
            outline-style: dotted;
        }
        
        p.p2 {
            border: 1px solid black;
            outline-style: dashed;
            outline-color: red;
        }
        
        p.p3 {
            border: 1px solid black;
            outline-style: solid;
            outline-color: red;
        }
    </style>
</head>

<body>
    <p class="p1">A dotted red outline</p>
    <p class="p2">A dashed red outline</p>
    <p class="p3">A solid red outline</p>
</body>

</html>

Output

Outlining the content in CSS | Example 2

The above code would outline the content inside the p tag according to the outline-style applied to it.

Outline-width

In CSS The outline-width property is used to specify the width of the outline, and can have one of the following values:

thin (typically 1px)
medium (typically 3px)
thick (typically 5px)
A specific size (pt, px, em, cm)

Example:

<!DOCTYPE html>

<head>
    <style>
        .p1 {
            border: 4px solid blue;
            outline-style: solid;
            outline-color: red;
            outline-width: thin;
        }
    </style>
</head>
<html>

<body>
    <p class="p1">
        Some content
    </p>
</body>

</html>

Output

Outlining the content in CSS | Example 3

The above code would apply solid outline with thin width around the output.

Outline-color

The CSS outline-color property sets the color of the outline. The color can be set by any type (RGB, HEX, NAME).

Example:

<!DOCTYPE html>

<head>
    <style>
        .p1 {
            border: 2px solid blue;
            outline-style: solid;
            outline-color: red;
        }
    </style>
</head>
<html>

<body>
    <p class="p1">
        Some content
    </p>
</body>

</html>

Output

Outlining the content in CSS | Example 4

The above code would apply solid outline, thin width with color red around the output.

CSS Tutorial & Examples »

Margins in CSS

Selectors in CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples