CSS outline functions similarly to the CSS border attribute, enabling the addition of an additional border around an element to enhance visual emphasis.
It is as easy as to apply as a border.
See this example:
<!DOCTYPE html>
<html>
<style type="text/css">
.box {
background-color: #eee;
outline: 3px solid red;
border: 3px solid lightgreen;
padding: 5px 10px;
}
</style>
<div class="box">Welcome to C# Programming</div>
</body>
</html>
Difference between Border and Outline
At first sight, border and outline may seem alike, yet there are significant distinctions between them:
- In the case of borders, it's impossible to set distinct widths, styles, and colors for each of the four sides of an element; instead, the same values are applied to all four sides uniformly.
- Unlike borders, the outline is not factored into the element's dimensions. Therefore, regardless of the thickness of the outline applied, it will not alter the overall dimensions of the element.
The outline attribute functions as a shorthand attribute that can be broken down into outline-width, outline-style, and outline-color attributes. This allows for the flexibility of utilizing each property individually as needed.
See this example:
<!DOCTYPE html>
<html>
<style type="text/css">
.box {
background-color: #eee;
border: 3px solid Lightgreen;
padding: 5px 10px;
outline-width: 3px;
outline-style: solid;
outline-color: red;
}
</style>
<div class="box">Welcome to C# Programming</div>
</body>
</html>
In the previous illustration, you can observe the trio of outline characteristics:
Outline-width: Comparable to margin and padding, outline-width can be specified as an absolute value, a relative value, or one of the predefined options such as thin, medium, or thick. Opting for an absolute or relative value is recommended due to potential variations in how different browsers render the predefined values like thin, medium, or thick.
The outline-color property determines the color used for the outline, supporting a wide range of colors found in HTML and CSS.
In the previous instance, we exclusively employed the solid outline style; however, various other outline styles exist, including hidden, dotted, dashed, double, groove, ridge, inset, and outset.
Let's consider an example to showcase the application of various outline formats.
See this example:
<!DOCTYPE html>
<html>
<style type="text/css">
.box {
outline-color: red;
outline-width: 4px;
margin: 10px;
float: left;
border: 2px solid lightgreen;
padding: 5px 10px;
}
</style>
<div class="box" style="outline-style: dashed;">This is dashed outline.</div>
<div class="box" style="outline-style: dotted;">This is dotted outline.</div>
<div class="box" style="outline-style: double;">This is double outline.</div>
<div class="box" style="outline-style: groove;">This is groove outline.</div>
<div class="box" style="outline-style: inset;">This is inset outline.</div>
<div class="box" style="outline-style: outset;">This is outset outline.</div>
<div class="box" style="outline-style: ridge;">This is ridge outline.</div>
<div class="box" style="outline-style: solid;">This is solid outline.</div>
</body>
</html>
Outline offset
The outline offset property is utilized to establish a space between the outline and the border.
It accepts a CSS measurement unit, and the transparent gap between the border and the outline gets filled with the background color of the containing element. This feature allows for a clear visual distinction between the outline and the border.
Let's consider an example to distinguish between outline and border.
See this example:
<!DOCTYPE html>
<html>
<style type="text/css">
.box {
background-color: #eee;
outline: 3px solid red;
outline-offset: 6px;
border: 3px solid Lightgreen;
padding: 5px 10px;
}
</style>
<div class="box">Welcome to C# Programming</div>
</body>
</html>