CSS - outline Property

Quiz

CSS outline property draws a line outside the border of an element. It is a shorthand property used for defining the values of properties: outline-width, outline-style and outline-color in a single statement. The outline-style has to be defined. Default values of other properties will be used if not specified.

Syntax

outline: outline-width outline-style outline-color | initial | inherit;

Property Values

Value	Description
outline-width	It sets the width of the outline of an element.
outline-style	It sets the style of the outline of an element.
outline-color	It sets the color of the outline of ane element. Different formats can be used (e.g. named colors, hexadecimal values, rgb values, hsl values etc.)
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Outline Property

The following examples explain the outline property.

Defining All Values of Outline Property

The outline property is a shorthand for defining three properties: outline-width, outline-style and outline-color of the outline. To set all these values in single statement, we provide three values. Of the three values, the style is mandatory. Default values for color and width will be applied if not specified. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         color: blue;
         text-align: center;
         padding: 7px;
         margin: 25px;
         height: 50px;
         background-color: lightgray;
         border: 4px solid black;
      }

      #first {
         outline: 7px dotted green;
      }

      #second {
         outline: 9px double green;
      }

      #third {
         outline: 5px dashed green;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline property
   </h2>
   <h4>
      outline: 7px dotted green
   </h4>
   <p id="first">
      This paragraph has border: 4px solid 
      black and outline: 7px dotted green.
   </p>
   <h4>
      outline: 9px double green
   </h4>
   <p id="second">
      This paragraph has border: 4px solid 
      black and outline: 9px double green.
   </p>
   <h4>
      outline: 5px dashed green
   </h4>
   <p id="third">
      This paragraph has border: 4px solid 
      black and outline: 5px dashed green.
   </p>
</body>

</html>

Constituent Properties of Outline Property

The outline property is a shorthand property for outline-width, outline-style and outline-color. These properties can be used in combination to produce the same effect produced by outline property alone. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         color: blue;
         text-align: center;
         padding: 7px;
         margin: 25px;
         height: 50px;
         background-color: lightgray;

         border: 4px solid black;
         outline-width: 7px;
         outline-style: dashed;
         outline-color: red;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline property
   </h2>
   <h4>
      outline-width: 7px, outline-style: 
      dashed, outline-color: red
   </h4>
   <p>
      This paragraph has border: 4px solid 
      black and outline: 7px dashed red.
   </p>
</body>

</html>

Supported Browsers

Property
outline	1.0	8.0	1.5	1.2	7.0

css_reference.htm

Print Page