/    /  CSS Outline

CSS Outline

 

CSS outline is just like CSS border property. It provides to draw an extra border around an element to get visual attention.

 

 Example:

 

<!DOCTYPE html>
<html>
<style type="text/css">
.box {
     background-color: #eee;
     outline: 3px solid #6666ff;
     border: 3px solid #66ff33;
     padding: 5px 10px;
}
</style>
<div class="box">Welcome to I2tutorials</div>
</body>
</html>

 

OUTPUT:

 

CSS Outline

 

Border :

 

It is not possible to apply various outline widths, styles, and colors for the four sides of an element while in the border.

 

Outline:

 

The border is a part of the element’s dimension but the outline is not the part of element’s dimension.

 

Outline offset:

 

It is used to create a distance between outline and border.

 

Example:

 

<!DOCTYPE html>
<html>
<style type="text/css">
.box {
     background-color: #1a8cff;
     outline: 3px solid #000066;
     outline-offset: 6px;
     border: 3px solid Lightgreen;
     padding: 5px 10px;
}
</style>
<div class="box">Welcome to JavaTpoint</div>
</body>
</html>

 

OUTPUT:

 

CSS Outline