Outline Property in CSS

This CSS outline property defines the width, line style, and color of the outline of an element.

Value	used for
outline-width	This specifies the width of outline.
outline-style	This specifies the style of the outline.
outline-color	This specifies the color of the outline.
outline-outset	The outline makes the box look like it is coming out of the canvas.
none	No border. Equivalent of outline-width:0;

outline style property values

solid	The outline is a single solid line.
dotted	The outline is a series of dots.
dashed	The outline is a series of short lines.
double	The outline is two solid lines.
groove	The outline looks as though it is carved into the page.
ridge	The outline looks the opposite of groove.
inset	The outline makes the box look like it is embedded in the page.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Outline in CSS</title>
  <style>
    div{
      width: 300px;
      border:3px solid brown;
      padding: 20px;

      outline: 2px solid blue;
      outline-width: 3px;
      outline-style:dashed;
      outline-color: red;
      outline-offset: 2px;
    }
  </style>
</head>
<body>
  <h1>Outline in CSS</h1>
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate minima placeat maxime dolorem sit perspiciatis, iste obcaecati enim voluptates harum incidunt voluptatibus dolore illo, doloremque ipsam veritatis porro reiciendis laborum.
  </div>
</body>
</html>
<!---

outline-width
outline-style
  solid
  dotted
  dashed
  double
  groove
  ridge
  inset
  outset
  none

outline-color
outline-offset
-->

Output

Outline Property in CSS

outline style property values

Source Code :

Output

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects