CSS - Outlines

Outlines are very similar to borders, but there are few major differences as well −
An outline does not take up space.
An outline does not take up space.
Outlines do not have to be rectangular.
Outlines do not have to be rectangular.
Outline is always the same on all sides; you cannot specify different values for different sides of an element.
Outline is always the same on all sides; you cannot specify different values for different sides of an element.
NOTE − The outline properties are not supported by IE 6 or Netscape 7.
You can set the following outline properties using CSS.
The outline-width property is used to set the width of the outline.
The outline-width property is used to set the width of the outline.
The outline-style property is used to set the line style for the outline.
The outline-style property is used to set the line style for the outline.
The outline-color property is used to set the color of the outline.
The outline-color property is used to set the color of the outline.
The outline property is used to set all the above three properties in a single statement.
The outline property is used to set all the above three properties in a single statement.
The outline-width property specifies the width of the outline to be added to the box. Its value should be a length or one of the values thin, medium, or thick, just like the border-width attribute.
A width of zero pixels means no outline.
Here is an example −
<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:solid;">
         This text is having thick outline.
      </p>
      <br />
      
      <p style = "outline-width:5px; outline-style:solid;">
         This text is having 5x outline.
      </p>
   </body>
</html> 
It will produce the following result −

   This text is having thin outline.


   This text is having thick outline.


   This text is having 5x outline.

The outline-style property specifies the style for the line (solid, dotted, or dashed) that goes around an element. It can take one of the following values −
none − No border. (Equivalent of outline-width:0;)
none − No border. (Equivalent of outline-width:0;)
solid − Outline is a single solid line.
solid − Outline is a single solid line.
dotted − Outline is a series of dots.
dotted − Outline is a series of dots.
dashed − Outline is a series of short lines.
dashed − Outline is a series of short lines.
double − Outline is two solid lines.
double − Outline is two solid lines.
groove − Outline looks as though it is carved into the page.
groove − Outline looks as though it is carved into the page.
ridge − Outline looks the opposite of groove.
ridge − Outline looks the opposite of groove.
inset − Outline makes the box look like it is embedded in the page.
inset − Outline makes the box look like it is embedded in the page.
outset − Outline makes the box look like it is coming out of the canvas.
outset − Outline makes the box look like it is coming out of the canvas.
hidden − Same as none.
hidden − Same as none.
Here is an example −
<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin solid  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;">
         This text is having 5x dotted outline.
      </p>
   </body>
</html> 
It will produce the following result −

   This text is having thin solid  outline.


   This text is having thick dashed outline.


   This text is having 5x dotted outline.

The outline-color property allows you to specify the color of the outline. Its value should either be a color name, a hex color, or an RGB value, as with the color and border-color properties.
Here is an example −
<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;outline-color:red">
         This text is having thin solid red  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html> 
It will produce the following result −

   This text is having thin solid red  outline.


   This text is having thick dashed green outline.


   This text is having 5x dotted blue outline.

The outline property is a shorthand property that allows you to specify values for any of the three properties discussed previously in any order but in a single statement.
Here is an example −
<html>
   <head>
   </head>
   
   <body>
      <p style = "outline:thin solid red;">
         This text is having thin solid red outline.
      </p>
      <br />
      
      <p style = "outline:thick dashed #009900;">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline:5px dotted rgb(13,33,232);">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html> 
It will produce the following result −

   This text is having thin solid red outline.


   This text is having thick dashed green outline.


   This text is having 5x dotted blue outline.


    33 Lectures 
     2.5 hours 

 Anadi Sharma

    26 Lectures 
     2.5 hours 

 Frahaan Hussain

    44 Lectures 
     4.5 hours 

 DigiFisk (Programming Is Fun)

    21 Lectures 
     2.5 hours 

 DigiFisk (Programming Is Fun)

    51 Lectures 
     7.5 hours 

 DigiFisk (Programming Is Fun)

    52 Lectures 
     4 hours 

 DigiFisk (Programming Is Fun)
 Print
 Add Notes
 Bookmark this page