Introduction:

In this article we will to learn what is css outline property or how to use css outline property or css outline property with example.

 

Description:

The Outlines are very similar to borders, It facilitates you to draw an extra border around an element to get visual attention.


Note:-

1. An outline does not take up space.

2. Outlines do not have to be rectangular.

3. Outline is always the same on all sides; you cannot specify different values for different sides of an element.


CSS Outline Property 

There are three properties.

 

outline-width: The outline-width property is used to set the width of the outline.

 

outline-style: The outline-style property is used to set the line style for the outline.

 

outline-color: The outline-color property is used to set the color of the outline.

 

Example of CSS Outline property:

 <!DOCTYPE html>
<html>
<head>
    <title>Example of CSS Outline property</title>
</head>
<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> 


 

 Let's check live example

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like