Tutorial Manthra

An outline is a line drawn around elements, outside the border edge, to make the element “stand out.” While it looks very similar to a border, it has two very important differences that every developer must know.

Outline vs. Border: The Key Differences

Layout Space: Unlike borders, outlines never take up space. They are drawn on top of the element, so they do not affect the width, height, or the position of surrounding elements.

Shape: Borders can be rounded using border-radius, but outlines are traditionally rectangular (though modern browsers are starting to support rounded outlines).

Position: Outlines are always outside the border.

CSS Outline Properties

You can control the style, color, and thickness of the outline using these individual properties:

A. Outline Style (outline-style)

Just like borders, an outline is invisible unless you define a style.

• Values: dotted, dashed, solid, double, groove, ridge, inset, outset.
• Example: button:focus { outline-style: solid; }

B. Outline Color (outline-color)

Sets the color of the outline.

• Example: input { outline-color: red; }

C. Outline Width (outline-width)

Sets the thickness of the line.

• Values: thin, medium, thick, or a specific size like px.
• Example: a:active { outline-width: 4px; }

D. Outline Offset (outline-offset)

This is a unique property that borders don’t have. It adds space between the outline and the border of the element. This space is transparent.

• Example: div { outline-offset: 10px; }

Outline Shorthand Property

To save code, you can define the width, style, and color in one line.

Syntax Order: outline: [width] [style] [color];

Example Code:

.oline {
  border: 2px solid #ccc;
  outline: 3px solid #04AA6D;
  outline-offset: 4px;
}

Output

Summary Table: CSS Outline Properties