CSS - outline-style Property

Previous
Quiz
Next

CSS outline-color property determines the style of an outline around an element. An outline is a line that is drawn around the border of an element.

Syntax

outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Property Values

Value Description
none It specifies no outline. Default value.
hidden It specifies a hidden outline.
dotted It specifies a dotted outline.
dashed It specifies a dashed outline.
solid It specifies a solid outline.
double It specifies a double outline.
groove It specifies a 3D grooved outline. Effect depends on the outline-color value.
ridge It specifies a 3D ridged outline. Effect depends on the outline-color value.
inset It specifies a 3D inset outline. Effect depends on the outline-color value.
outset It specifies a 3D outset outline. Effect depends on the outline-color value.
initial This sets the property to the default value.
inherit This inherits the property from the parent element.

Examples of CSS Outline Style Property

The following examples explain the outline-style property with different values.

Outline Style Property with None Value

To not have any outline for an element, we use the none value. In the following example, none value has been used with the outline-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         background-color: #08ff90;
         outline-width: 7px;
         outline-style: none;

      }
   </style>
</head>

<body>
   <h2>
      CSS outline-style property
   </h2>
   <h4>
      outline-style: none
   </h4>
   <div class="example ex1">
      This div has outline-style: none 
   </div>
</body>

</html>

Outline Style Property with Hidden Value

To have hidden outline for an element, we use the hidden value. In the following example, hidden value is used with the outline-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         background-color: #08ff90;
         outline-width: 7px;
         outline-style: hidden;

      }
   </style>
</head>

<body>
   <h2>
      CSS outline-style property
   </h2>
   <h4>
      outline-style: hidden
   </h4>
   <div class="example ex1">
      This div has outline-style: hidden 
   </div>
</body>

</html>

Outline Style Property with Dotted Value

To have a dotted outline for an element, we use the dotted value. In the following example, dotted value has been used with the outline-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px dashed black;
         background-color: #08ff90;
         outline-width: 7px;
         outline-color: red;
         outline-offset: 2px;
         outline-style: dotted;

      }
   </style>
</head>

<body>
   <h2>
      CSS outline-style property
   </h2>
   <h4>
      outline-style: dotted
   </h4>
   <div class="example ex1">
      This div has border: 4px dashed 
      black and outline-style: dotted 
   </div>
</body>

</html>

Outline Style Property with Dashed Value

To have a dashed outline for an element, we use the dashed value. In the following example, dashed value has been used with the outline-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px solid black;
         background-color: #08ff90;
         outline-width: 7px;
         outline-color: red;
         outline-offset: 2px;
         outline-style: dashed;

      }
   </style>
</head>

<body>
   <h2>
      CSS outline-style property
   </h2>
   <h4>
      outline-style: dashed
   </h4>
   <div class="example ex1">
      This div has border: 4px solid 
      black and outline-style: dashed 
   </div>
</body>

</html>

Outline Style Property with Solid Value

To have a solid outline for an element, we use the solid value. In the following example, solid value has been used with the outline-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px dashed black;
         background-color: #08ff90;
         outline-width: 7px;
         outline-color: red;
         outline-offset: 2px;
         outline-style: solid;

      }
   </style>
</head>

<body>
   <h2>
   CSS outline-style property
   </h2>
   <h4>
   outline-style: solid
   </h4>
   <div class="example ex1">
   This div has border: 4px dashed 
   black and outline-style: solid 
   </div>
</body>

</html>

Outline Style Property with Double Value

To have a double outline for an element, we use the double value. In the following example, double value has been used with the outline-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px dashed black;
         background-color: #08ff90;
         outline-width: 7px;
         outline-color: red;
         outline-offset: 2px;
         outline-style: double;

      }
   </style>
</head>

<body>
   <h2>
   CSS outline-style property
   </h2>
   <h4>
   outline-style: double
   </h4>
   <div class="example ex1">
   This div has border: 4px dashed 
   black and outline-style: double 
   </div>
</body>

</html>

Outline Style Property with Groove Value

To have a groove outline for an element, we use the groove value. In the following example, groove value has been used with the outline-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px dashed black;
         background-color: #08ff90;
         outline-width: 7px;
         outline-color: red;
         outline-offset: 2px;
         outline-style: groove;

      }
   </style>
</head>

<body>
   <h2>
      CSS outline-style property
   </h2>
   <h4>
      outline-style: groove
   </h4>
   <div class="example ex1">
      This div has border: 4px dashed 
      black and outline-style: groove 
   </div>
</body>

</html>

Outline Style Property with Ridge Value

To have a ridge outline for an element, we use the ridge value. In the following example, ridge value has been used with the outline-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px dashed black;
         background-color: #08ff90;
         outline-width: 7px;
         outline-color: red;
         outline-offset: 2px;
         outline-style: ridge;

      }
   </style>
</head>

<body>
   <h2>
      CSS outline-style property
   </h2>
   <h4>
      outline-style: ridge
   </h4>
   <div class="example ex1">
      This div has border: 4px dashed 
      black and outline-style: ridge 
   </div>
</body>

</html>

Outline Style Property with Inset Value

To have a inset outline for an element, we use the inset value. In the following example, inset value has been used with the outline-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px dashed black;
         background-color: #08ff90;
         outline-width: 7px;
         outline-color: red;
         outline-offset: 2px;
         outline-style: inset;

      }
   </style>
</head>

<body>
   <h2>
      CSS outline-style property
   </h2>
   <h4>
      outline-style: inset
   </h4>
   <div class="example ex1">
      This div has border: 4px dashed 
      black and outline-style: inset 
   </div>
</body>

</html>

Outline Style Property with Outset Value

To have an outset outline for an element, we use the outset value. In the following example, outset value has been used with the outline-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px dashed black;
         background-color: #08ff90;
         outline-width: 7px;
         outline-color: red;
         outline-offset: 2px;
         outline-style: outset;

      }
   </style>
</head>

<body>
   <h2>
      CSS outline-style property
   </h2>
   <h4>
      outline-style: outset
   </h4>
   <div class="example ex1">
      This div has border: 4px dashed 
      black and outline-style: outset 
   </div>
</body>

</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
outline-style 1.0 8.0 1.5 1.2 7.0
css_reference.htm
Print Page
Previous
Next
Advertisements