CSS Outline

Outline in CSS

CSS Outline is just like CSS border property. It is as easy as to apply as a border.

CSS Outline 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>

CSS 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>


Recommended Posts:

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *