CSS Outline

Outline is a feature in Cascading Style Sheets (CSS) that allows developers to add a border around an element that is not part of the element's dimensions or box model. It is used to indicate the element's focus or selection state.

Outlines are rendered outside of the element's box, and do not take up any space on the page. They can be styled using the outline-color, outline-style, and outline-width properties.

What are the different Outline properties?

There are three main properties used to style an outline in CSS:

outline-color:

This property sets the color of the outline. The color value can be set using any valid color value (e.g. a named color, a hex code, or an RGB value).

outline-style:

This property sets the style of the outline. It can take one of several values, including solid (the default), dotted, dashed, double, groove, ridge, inset, and outset.

outline-width:

This property sets the width of the outline. It can take any valid length value (e.g. 2px, 1em, etc.).

In addition, you can use outline property which is a shorthand property for setting all three of the above properties at once.

outline: <outline-width> <outline-style> <outline-color>

For example:

outline: 2px solid red;

In this case it will set 2px width, solid style and red color for outline.

CSS Outline Style Values

The outline-style property in CSS can take one of several possible values:

  • solid: The default value. Creates a solid outline.
  • dotted: Creates a dotted outline.
  • dashed: Creates a dashed outline.
  • double: Creates a double outline.
  • groove: Creates a 3D grooved outline. The effect depends on the outline color value.
  • ridge: Creates a 3D ridged outline. The effect depends on the outline color value.
  • inset: Creates a 3D inset outline. The effect depends on the outline color value.
  • outset: Creates a 3D outset outline. The effect depends on the outline color value.
  • none: No outline is displayed.
  • hidden: Same as 'none', but it should be used to indicate that the element is not selected.

It's worth noting that not all the values are supported by all browsers, groove, ridge, inset and outset values are not supported in all the browsers.

CSS Outline Examples

Here are some examples of using the CSS outline property:

A red, solid outline with a width of 2 pixels:

outline: 2px solid red;

A blue, dotted outline with a width of 1 pixel:

outline: 1px dotted blue;

A green, double outline with a width of 3 pixels:

outline: 3px double green;

A yellow, groove outline with a width of 4 pixels:

outline: 4px groove yellow;

A pink, inset outline with a width of 2 pixels:

outline: 2px inset pink;

A purple, ridge outline with a width of 5 pixels:

outline: 5px ridge purple;

No outline will be displayed:

outline: none;

You can apply these styles to any HTML element by setting the outline property in a CSS class and applying that class to the element.

<div class="outline-example"> Example</div>
.outline-example {
  outline: 2px solid red;
}

You can also use the individual properties like outline-color, outline-style and outline-width to style the outline.

.outline-example {
  outline-color: red;
  outline-style: solid;
  outline-width: 2px;
}

The above CSS will give the same result as first example.

CSS Basics