CSS Outlines


In CSS, the outline property is used to draw a line around an element that is outside the border of the element. The outline property is a shorthand property for the following individual outline properties:

  • outline-color: specifies the color of the outline.
  • outline-style: specifies the style of the outline.
  • outline-width: specifies the width of the outline.

You can set the outline property on any element, and you can control the look of the outline by setting the color, style, and width as necessary.

Here’s an example of how you might use the outline property:

.my-element {
    outline: 1px solid black;

This would add a 1 pixel wide, solid black outline around the element with the class my-element.

Unlike the border property, the outline property does not take up space and does not affect the layout of the page. It is used mainly for visual purposes, such as to highlight an element when it is focused or hovered over.

You can also use the individual outline properties to specify different values for the outline. For example:

.my-element {
    outline-color: red;
    outline-style: dashed;
    outline-width: 2px;

This would add a red, dashed outline that is 2 pixels wide to the element with the class my-element.