CSS Outline

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>

Spread the love

Leave a Comment

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