CSS Outline

The CSS outline property is used to create a border that is outside the border edge of an element's content, padding, and border. It is often used to highlight elements on a webpage without affecting the layout of the page.

The outline property can have up to three values: outline-color, outline-style, and outline-width. These values can be specified individually or combined to form a shorthand property.

Outline Color

The outline-color property is used to specify the color of the outline. It can be set using a color keyword, a hexadecimal value, an RGB value, or an HSL value. Here is an example:

div.element {
 outline: solid 10px ; 
 outline-color:red;
 border: 2px solid black;
  width:100px;
  height:50px;
  background-color:grey;
}

Result:

Outline Style

The outline-style property is used to specify the style of the outline. This can be set to values such as dotted, dashed, solid, double, groove, ridge, inset, outset, or none. Here is an example:

div.element {
 outline: 10px red;
 outline-style: dotted; 
 border: 2px solid black;
  width:100px;
  height:50px;
  background-color:grey;
  
}

Result:

Outline Width

The outline-width property is used to specify the width of the outline. This can be set to values such as thin, medium, thick, or a specific length value in pixels, ems, or other units. Here is an example:

div.element {
 outline-style: solid; 
 outline-color: red;
 outline-width: 2px ; 
 border: 2px solid black;
  width:100px;
  height:50px;
  background-color:grey;
  
}

Result:

Shorthand Outline Property

The shorthand outline property can be used to set all three values at once, in the following order: outline-color, outline-style, outline-width. Here is an example:

div.element {
  outline: red dotted 2px;
   border: 2px solid black;
  width:100px;
  height:50px;
  background-color:grey;
}

Result:

Example

Let's say we have a button element that we want to style with a blue dashed outline:

<button class="outline-example">Click me</button>

And the CSS to achieve this would be:

.outline-example {
  outline: red dashed 1px;
}

Result: