CSS outline is just like CSS border property.
It is as easy as to apply as a border.
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”>Hello Learner’s!</div>
</body>
</html>
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”>Hello Learner’s!</div>
</body>
</html>
In the above example, you can see the three outline properties:
* Outline-width : It is similar to margin and padding. It can be either an absolute value or a relative value or one of the predefined outline width values i.e. thin, medium or thick.
* Outline-color : It specifies the color that you use for the outline. It supports all the colors available in HTML and CSS.
* Outline-style : In the above example, we have used only solid outline style while there are a lot of outline style i.e. hidden, dotted, dashed, solid, double, groove, ridge, inset and outset.
Let’s take an example to demonstrate the usage of different outline-styles.
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 is used to create a distance between outline and border.
Let’s take an example to see the difference between outline and border.
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”>Hello Learner’s!</div>
</body>
</html>