CSS Outlines

CSS outline creates lines around the outside of an element’s border, without affecting its size or layout. It means adding an outline won’t affect the element’s size or the positioning of adjacent elements.

Types of Outline Properties

CSS provides following outline properties to style the HTML elements.

• outline-style: It specifies whether an outline should be solid, dashed line, double line, or one of

  the other possible values.

• outline-width: It Specifies the width of an outline.

• outline-color: It specifies the color of an outline.

• outline-offset: It specifies the space between an outline and border edge of the element.

The outline-style Property

CSS outline-style property specifies the style for the line (solid, dotted, or dashed) that goes around an element.

Example

In this example, we have set the outline-style property of each paragraph with different property values.

The outline-width Property

CSS outline-width property specifies the width of the outline to be added to the element. Its value should be thin, medium, thick, or length (in pixels, em, etc), just like the border-width attribute.

Example

In this example, we have used outline-width property to set the outline width of the paragraphs using values such as thin, medium, thick and by using length(in px).

The outline-color Property

To set the color of an outline, the outline-color property is used. If no color is specified for the outline, then the default color i.e. black will be set.

Example

In this example, we have used the outline-color property to set the outline color of paragraphs to green and red.

The outline-offset Property

You can use CSS outline-offset property to set the space between an element and its outline. It is used for creating more visual separation between the element and its outline.

Example

In this example, we have used the outline-offset property to create a solid outline of grey color around div having a separation of 10px from the border.

Outline Shorthand Property

To set the style, width, and color of an outline, we can use the shorthand outline property . The outline-offset property cannot be passed in shorthand property. It needs to be passed separately.

Syntax

The syntax for using the CSS outline property is as follows:

h2 {

    outline: 4px dotted green;

    outline-offset: 5px;

}

Example

In this example, we have used the outline property to set the outline of the paragraph and div with different styles, colors, and widths. You can see that the outline-offset property is used separately.

Using Outline With Focus

To highlight the elements when they are focused, the outline property is used with the CSS pseudo-class :focus property .

Example

In this example, we have used the outline property with the :focus property to set the outline of the input field when it is focused.

Outline vs Border

Following table illustrates the differences between outline and border:

activated. | It can be used for various purposes, such as separating elements, creating boxes, and adding visual

emphasis. | | It is created using the outline property in CSS. | It is created using the border property in CSS. |

Example

List of CSS Outline Properties

Here we have tabulated all the properties associated with CSS outline.