CSS Outlines, TutorialsPoint, CSS Outlines Tutorial

CSS Outlines

CSS outline is just like CSS border property. An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

1. The outline property is used to set all the above three properties in a single statement.

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

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

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

CSS Outline

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

Example :

<!DOCTYPE html>  
<html> 
<head>
<title>CSS Outline</title>
    
<style type="text/css">  
.outline{  
background-color:#FC0;  
outline: 2px solid red;  
border: 3px solid #690;  
padding: 10px;  
}
</style> 
 </head>
 
<body> 
<div class="outline">This is CSS Ouline sample text.</div>  
</body>  
</html>

Output :

This is CSS Ouline sample text.

CSS Outline-Color

It specifies the color that you use for the outline. The Outline-colors Define color-name, RGB, HEX.

Example :

<!DOCTYPE html>  
<html> 
<head>
<title>CSS Outline Color</title>
    
<style type="text/css">  
.outline{  
outline: 2px solid #690;   
padding: 10px;  
}
</style> 
 </head>
 
<body> 
    <div class="outline">This is CSS Ouline Color sample text.</div>  
</body>  
</html>

Output :

This is CSS Ouline sample text.

CSS Outline-Style

The outline-style property specifies the style for the line (solid, dotted, or dashed) that goes around an element.

Example :

<!DOCTYPE html>  
<html> 
<head>
<title>CSS Outline Styles</title>
    
<style type="text/css">  
.outline_dotted {outline-style: dotted; border:1px solid #000; outline-color:#F60; padding:5px;}
.outline_dashed {outline-style: dashed; border:1px solid #000; outline-color:#F60; padding:5px;}
.outline_solid {outline-style: solid; border:1px solid #000; outline-color:#F60; padding:5px;}
.outline_double {outline-style: double; border:1px solid #000; outline-color:#F60; padding:5px;}
.outline_groove {outline-style: groove; border:1px solid #000; outline-color:#F60; padding:5px;}
.outline_ridge {outline-style: ridge; border:1px solid #000; outline-color:#F60; padding:5px;}
.outline_inset {outline-style: inset; border:1px solid #000; outline-color:#F60; padding:5px;}
.outline_outset {outline-style: outset; border:1px solid #000; outline-color:#F60; padding:5px;}
</style> 
 </head>
 
<body> 
 
<h4><div class="outline_dotted">This is CSS Ouline Dotted Style sample text.</div> </h4>
<h4><div class="outline_dashed">This is CSS Ouline Dashed Style sample text.</div> </h4>
<h4><div class="outline_solid">This is CSS Ouline Solid Style sample text.</div> </h4> 
<h4><div class="outline_double">This is CSS Ouline Double Style sample text.</div> </h4>
<h4><div class="outline_groove">This is CSS Ouline Groove Style sample text.</div> </h4>
<h4><div class="outline_ridge">This is CSS Ouline Ridge Style sample text.</div> </h4>
<h4><div class="outline_inset">This is CSS Ouline Inset Style sample text.</div> </h4>
<h4><div class="outline_outset">This is CSS Ouline Outset Style sample text.</div> </h4>
 
</body>  
</html>

Output :

This is CSS Ouline Dotted Style sample text.

This is CSS Ouline Dashed Style sample text.

This is CSS Ouline Solid Style sample text.

This is CSS Ouline Double Style sample text.

This is CSS Ouline Groove Style sample text.

This is CSS Ouline Ridge Style sample text.

This is CSS Ouline Inset Style sample text.

This is CSS Ouline Outset Style sample text.

CSS Outline-Width

The outline-width property specifies the width of the outline to be added to the box. 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.

Example :

<!DOCTYPE html>  
<html> 
<head>
<title>CSS Outline Width</title>
    
<style type="text/css">  
.outline{  
outline:1px solid #F60;
outline-width:10px; 
padding: 10px;  
}
</style> 
 </head>
 
<body> 
<div class="outline">This is CSS Ouline Width sample text.</div>  
</body>  
</html>

Output :

This is CSS Ouline Width sample text.

CSS Tutorial