CSS Display

CSS outline is a property used to draw an additional border around an element, providing visual attention. It is similar to the CSS border property and is commonly used to indicate focus or active states of elements like buttons, links, and form fields.

Outlines Vs Borders

An outline looks very similar to the border, but it differs from the border in the following ways:

• Outlines do not take up space.
• Outlines cannot have different widths, colors, or styles for each edge.
• Outlines do not affect surrounding elements, except for overlapping.
• Unlike borders, outlines do not change the size or position of the element.
• Outlines may be non-rectangular, but we cannot create circular outlines.

Note: when applying an outline to an element, it will take up the same space on the webpage as if no outline were applied. This is because outlines overlap margins and surrounding elements.

Outline Styles

This style property sets the style of an element's outline such as solid, dotted, etc.

The outline-style property can have one of the following values: none, solid, dashed, dotted, double, inset, outset, groove, and ridge.

Input:-

Output:-

The value none displays no outline. The values inset, outset, groove, and ridge create a 3D-like effect that essentially depends on the outline-color value.

Note: We must specify an outline style in order to make the outline appear around an element because the default outline style is none. Whereas, the default outline width or thickness is medium, and the default outline color is the same as the text color.

Outline Width

The outline-width property specifies the width of the outline to be added to an element.

Input:-

Output:-

Note:- The outline width can be specified using any length value, such as px, em, rem, and so on. It can also be specified using one of the three keywords: thin, medium, and thick. Percentage or negative values are not allowed — just like the border-width property.

Outline Color

The outline-color property sets the color of the outline. This property accepts the same values as those used for the color property.

Input:-

Output:-

Outline Shorthand Property

This is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule.

If the value for an individual outline property is not specified while setting the outline shorthand property, the default value for that property will be used instead, if any.

For example, if the value for the outline-color property is missing or not specified when setting the outlines, the element's color property will be used as the value for the outline color.

Input:-

Output:-

Removing Outline Around Active Links

It is common to use the outline property to remove the outline around active links, but it is recommended to apply alternative styles to indicate a focus on the links.