CSS Outline Properties

You are currently viewing CSS Outline Properties
CSS Outline Property

CSS Outline Properties

CSS Outline Properties is an alternate for CSS border property but some limitations such as –

  • An outline does not take space.
  • Outlines don’t have to be rectangular.
  • Outlines are always the same on all sides; you can not specify different values for different sides of an element.

Outline properties don’t support on some browser’s version like Internet Explorer 6 and Netscape 7.

We can set following outline properties using CSS.

  • The outline-width property is used to set the width of the outline.
  • The outline-style property is used to set the style for the outline.
  • outline-color property is used to set the color of the outline.
  • outline property is used as shorthand to specify all the above property’s value in a single statement.

The outline-width Property

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

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;)
  • solid − Outline is a single solid line.
  • dotted − Outline is a series of dots.
  • dashed − Outline is a series of short lines.
  • double − Outline is two solid lines.
  • groove − Outline looks as though it is carved into the page.
  • ridge − Outline looks the opposite of groove.
  • 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.
  • 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 provide 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

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

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 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.
Share post

Prajjwal Singh

Tech Blogger || Web developer || Computer Networking Enthusiast || Microsoft SQL Database Management Expert || Software Debugger || Learned DOS OS Structure

Leave a Reply