CSS Outline Property

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

i)

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;
}


CSS Outline Property Example

<!DOCTYPE html>
<html>
<head>
    <title> Outline in CSS </title>
    <style>
        .outlinePara {
            border: 2px solid black;
            outline: #e65b00 dotted 3px;
            margin: 20px;
            padding: 20px;
            text-align: center;
            outline-offset: 10px;
        }
    </style>
</head>
<body>
    <p class="outlinePara"> This is a paragraph </p>
</body>
</html>

Output: 

This is a paragraph


OutlineProperty in CSS Part-23 PDF

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad