An Outline in CSS is a line that is drawn outside the border of an HTML element.
Let us demonstrate Outline with the below example.
<html>
<head>
<style>
p {
border-style: solid;
outline-width: 10px;
outline-color: red;
outline-style: solid;
}
</style>
</head>
<body>
<p>
This is the first paragraph.
</p>
</body>
</html>
So, in the above example, to demonstrate Outline in CSS, at first we have drawn a black border around the <p> element.
border-style: solid;
Then we have drawn the outline, which is red in color.
outline-color: red;
And the outline is of 10px width.
outline-width: 10px;
Finally, we have set the outline-style for the outline.
outline-style: solid;
Now, if you see the above output, the outline that is red in color and has 10px width is drawn outside the black border.
Next, let us understand the different values we can use for the outline-style property.
| outline-style | Description |
|---|---|
| solid | Used to draw a solid outline |
| dotted | Used to draw a dotted outline |
| dashed | Used to draw a dashed outline |
| double | Used to draw a double outline |
| ridge | Used to draw a ridged outline with 3D effect |
| groove | Used to draw a grooved outline with 3D effect |
| inset | Used to draw an inset outline with 3D effect |
| outset | Used to draw an outset outline with 3D effect |
| none | No outline is drawn |
| hidden | Used to draw a hidden outline |
The outline property is a combination of outline-color, outline-width and outline-style properties.
So, let us rewrite the above example using the outline property.
<html>
<head>
<style>
p {
border-style: solid;
outline: 10px solid red;
}
</style>
</head>
<body>
<p>
This is the first paragraph.
</p>
</body>
</html>
So, if you look at the above code, three lines from the previous example.
outline-width: 10px; outline-color: red; outline-style: solid;
Is combined into a single line.
outline: 10px solid red;
And we get the same output as the previous example.