CSS - Outlines

Previous
Next

Outlines are very similar to borders, but there are few major differences as well −

  • An outline does not take up space.

  • Outlines do not have to be rectangular.

  • Outline is always the same on all sides. You cannot specify different values for outline on 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-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-offset property is used to set the space between the outline and border edge of ab element.

  • The outline property is used to set all the above three properties 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; padding: 5px">
         This text is having thin outline.
      </p>
      <p style = "outline-width: thick; outline-style: solid; padding: 5px">
         This text is having thick outline.
      </p>
      <p style = "outline-width: 5px; outline-style: solid; padding: 5px">
         This text is having 5px outline.
      </p>
   </body>
</html>

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 outline. (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; padding: 5px">
         This text is having thin solid outline.
      </p> 
      <p style = "outline-width: thick; outline-style: dashed; padding: 5px">
         This text is having thick dashed outline.
      </p>
      <p style = "outline-width: 5px; outline-style: dotted; padding: 5px">
         This text is having 5px dotted outline.
      </p>
   </body>
</html>

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; padding: 5px">
         This text is having thin solid red outline.
      </p>
      <p style = "outline-width: thick; outline-style: dashed; outline-color: #009900; padding: 5px">
         This text is having thick dashed green outline.
      </p>     
      <p style = "outline-width: 5px; outline-style: dotted; outline-color: rgb(13,33,232); padding: 5px">
         This text is having 5px dotted blue outline.
      </p>
   </body>
</html>

The outline-offset Property

The outline-offset property is used to specify the space between an outline and the border edge of an element. The space between the outline and the element is transparent.

Here is an example −

<html>
   <head>
        <style>
          div.example {
            margin: 20px;
            border: 2px dotted #000;
            background-color: #08ff90;
            outline: 4px solid #666;
            outline-offset: 10px;
          }
        </style>
   </head>
   <body>
        <h2>Outline-offset property</h2>
        <div class="example">The outline-offset is 10px</div>
   </body>
</html>

The outline Property

The outline property is a shorthand property that allows you to specify values of different properties in a single statement.

  • The values that can be passed are outline-style, outline-color and outline-width.

  • The order in which the values can be passed is not fixed.

  • outline-offset cannot be passed as a shorthand property in outline. It needs to be passed separately.

Here is an example −

<html>
   <head>
   </head>
   <body>
      <p style = "outline: thin solid red; padding: 10px;">
         This text is having thin solid red outline.
      </p>
      <p style = "outline: thick dashed #009900; padding: 10px;">
         This text is having thick dashed green outline.
      </p>
      <p style = "outline: 5px dotted rgb(13,33,232); padding: 10px;">
         This text is having 5px dotted blue outline.
      </p>
   </body>
</html>

Outline vs Border

Following table illustrates the differences between outline and border:

Outline Border
Outline is a non-rectangular shape that surrounds an element, usually with a solid color. Border is a rectangular shape that is drawn around the content of an element, can be solid, dashed, or dotted, and can have different colors and sizes.
It does not take up any space in the layout and does not affect the size or position of the element. It affects the size and position of the element, as it adds width to the element.
It is typically used to highlight or emphasize an element, such as when an element is focused or activated. It can be used for various purposes, such as separating elements, creating boxes, and adding visual emphasis.
It can be created using the outline property in CSS. It can be created using the border property in CSS.

Here is an example:

<html>
<head>
   <style>
      p {
         outline: thick solid red;
         outline-offset: 5px; 
         padding: 10px; 
         border: #009900 inset 10px;
      }
   </style>
</head>
<body>
   <p>See the difference of outline and border around the p element. The outline is red in color and the border is green.</p>
</body>
</html>

Some of the examples of the outlines are as follows:

property Description
outline This example shows all the various values passed to outline as shorthand.
outline-color This example shows all the various values passed to outline-color.
outline-style This example shows all the various values passed to outline-style.
outline-width This example shows all the various values passed to outline-width.
outline-offset This example shows all the various values passed outline-offset.
Print Page
Previous
Next
Advertisements