How to style outline property in CSS?

Outline in CSS

The outline properties in CSS allow you to set an area outside an element’s box. An outline is drawn just outside the border edge of the element. If you put an outline on an element, it will take up the same amount of space on the web pages as if you didn’t have an outline on that element. Because it overlap margins (transparent area outside of the border) and surrounding elements.

Outlines are similar to borders in CSS except the following:

  • An outline does not take space.
  • It is same on all sides and therefore you cannot apply different values for different sides.

You can set the following outline properties in CSS

  1. outline-style: This property is used to set the style of outline.
  2. outline-width: This property is used to set the width of outline.
  3. outline-color: This property is used to set the color of outline.
  4. outline: This property is used to set all above properties in single line.

outline-style property in CSS

The outline style property also works in a similar way as border style property works. It specifies the style of line in different ways. The different styles in outline are shown as below:

  1. none: It applies no outline.
  2. solid: It applies a solid outline.
  3. dashed: It applies a dashed outline.
  4. dotted: Applies dotted outline.
  5. groove: Applies carved border in page.
  6. double: Applies double line around an element.
  7. ridge: It works opposite to groove.
  8. hidden: Hide all the lines around an element.
  9. inset: Makes the box looks like an embedded.
  10. outset: Makes the box as it is coming out of the page.

Let us try some of the style above style properties.

<!doctype html>
   <head>
   <style>
   #solid{
	  outline-width:thin;
          outline-style:solid;
          width:25%;
	  }
   #dotted{
	  outline-width:thick;
          outline-style:dotted;
	  width:25%;
	  }
    #dashed{
	  outline-width:thick;
          outline-style:dashed;
	  width:25%;
	  }
    #double{
	  outline-width:thick;
          outline-style:double;
	  width:25%;
	  }
   </style>
   </head>
   <body>
      <p id="solid">
         The first para with style as solid line.
      </p>
      <p id="dotted">
         The second para with style as dotted line.
      </p>
      <p id="dashed">
         The third para with style as dashed line.
      </p>
      <p id="double">
         The fourth para with style as double line.
      </p>
   </body>
</html> 
outline-style property in CSS, www.programmingtutorial.in

outline-width in CSS

Just like border width in CSS, an outline width property also sets the width of outline. Its value should be a value or any one of the values thin, medium or thick like border-width values.

<!doctype html>
   <head>
   <style>
   #thin{
	  outline-width:thin;
          outline-style:solid;
          width:20%;
	  }
   #medium{
	  outline-width:medium;
          outline-style:solid;
	  width:20%;
	  }
    #thick{
	  outline-width:thick;
          outline-style:solid;
	  width:20%;
	  }
    #value{
	  outline-width:10px;
          outline-style:solid;
	  width:20%;
	  }
   </style>
   </head>
   <body>
      <p id="thin">
         The first para with width as thin.
      </p>
      <p id="medium">
         The second para with width as medium.
      </p>
      <p id="thick">
         The third para with width as thick.
      </p>
      <p id="value">
         The fourth para with width as 10px.
      </p>
   </body>
</html> 
outline-width in CSS, www.programmingtutorial.in

outline-color in CSS

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.

<!doctype html>
   <head>
   <style>
   #thin{
	  outline-width:thin;
          outline-style:solid;
	  outline-color:red;
          width:20%;
	  }
   #medium{
	  outline-width:medium;
          outline-style:solid;
	  outline-color:#005260;
	  width:20%;
	  }
    #thick{
	  outline-width:thick;
          outline-style:solid;
	  outline-color:rgb(25,30,155);
	  width:20%;
	  }
    #value{
	  outline-width:10px;
          outline-style:solid;
	  outline-color:pink;
	  width:20%;
	  }
   </style>
   </head>
   <body>
      <p id="thin">
         The first para with width as thin.
      </p>
      <p id="medium">
         The second para with width as medium.
      </p>
      <p id="thick">
         The third para with width as thick.
      </p>
      <p id="value">
         The fourth para with width as 10px.
      </p>
   </body>
</html> 
outline-color in CSS, www.programmingtutorial.in

The outline property in CSS

The outline property provides the facility of shorthand property which is used to apply all above properties in single line.

<!doctype html>
   <head>
   <style>
   #thin{
	  outline:thin solid red;
          width:20%;
	  }
   #medium{
	  outline:medium dotted #005260;
	  width:20%;
	  }
    #thick{
	  outline:thick dashed rgb(25,30,155);
	  width:20%;
	  }
    #value{
	  outline:8px double pink;
	  width:20%;
	  }
   </style>
   </head>
   <body>
      <p id="thin">
         The first para with width as thin.
      </p>
      <p id="medium">
         The second para with width as medium.
      </p>
      <p id="thick">
         The third para with width as thick.
      </p>
      <p id="value">
         The fourth para with width as 8px.
      </p>
   </body>
</html> 
The outline property in CSS