CSS Outline: An outline is a line drawn external the element’s border.
CSS outline is just like CSS border property. It facilitates you to draw an extra border around an element to get visual to be attention.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid black;
outline: #4CAF50 solid 10px;
margin: auto;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>CSS Outline</h2>
<p>This element has a 2px black border and a green outline with a width of 10px.</p>
</body>
</html>
CSS Outline
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element “stand out”.
CSS has the accompanying outline properties:
• outline-style
• outline-color
• outline-width
• outline-offset
• outline
Note: Outline varies from borders! In contrast to border, the outline is drawn external the element’s border, and may cover other content. Additionally, the outline isn’t a part of the element’s dimensions; the element’s total width and height isn’t influenced by the width of the outline.
CSS Outline Style
The outline-style property specifies the style of the outline, and can have one of the accompanying values:
- dotted – Defines a dotted outline
- dashed – Defines a dashed outline
- solid – Defines a solid outline
- double – Defines a double outline
- groove – Defines a 3D grooved outline
- ridge – Defines a 3D ridged outline
- inset – Defines a 3D inset outline
- outset – Defines a 3D outset outline
- none – Defines no outline
- hidden – Defines a hidden outline
The accompanying example shows the different outline-style values:
Example
Demonstration of the different outline styles:
<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>
<h2>The outline-style Property</h2>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>
</body>
</html>
Note: None of the other layout properties (which you will study in the next chapters) will have ANY impact except if the framework style property is set!
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
