CSS

CSS

🎯 What is outline?

The outline property creates a visible frame around an element.

⚠️ Key Difference from border:

The outline is drawn outside the element’s border and does NOT affect layout size or spacing.

This means it does not push or resize other elements.

🧩 Parts of the outline Property

The outline property consists of three main components:

1. Outline Width (Thickness)

Defines how thick the outline will be.

πŸ”Ή Values:

  • thin β†’ thin line
  • medium β†’ default
  • thick β†’ thick line
  • or custom values like 2px, 5px

2. Outline Style

Defines the appearance of the outline.

πŸ”Ή Values:

  • none β†’ no outline
  • solid β†’ solid line
  • dashed β†’ dashed line
  • dotted β†’ dotted line
  • double β†’ double line
  • groove β†’ 3D grooved effect
  • ridge β†’ 3D ridged effect
  • inset β†’ sunken effect
  • outset β†’ raised effect
  • hidden β†’ invisible outline

3. Color

Defines the color of the outline.

πŸ”Ή Examples:

  • red
  • #000
  • rgb(255, 0, 0)

πŸ’‘ Special Value: invert

The invert value automatically inverts the outline color based on the background, helping maintain contrast.

πŸ’‘ Additional Values

  • initial β†’ Resets to default browser outline
  • inherit β†’ Inherits outline from parent element

🧱 Example Usages

CSS

div {
  outline: 2px solid red; /* 2px thick red outline */
}

CSS

button:focus {
  outline: 3px dashed blue; /* visible focus indicator */
}

CSS

p {
  outline: thick ridge green; /* 3D ridge style outline */
}


1. Thickness (Width)

Defines how thick the border will be.

πŸ”Ή Values:

  • thin β†’ thin line
  • medium β†’ default medium line
  • thick β†’ thick line
  • or specific values like 2px, 5px, etc.

2. Style

Defines how the border looks visually.

πŸ”Ή Values:

  • none β†’ no border
  • solid β†’ solid line
  • dashed β†’ dashed line
  • dotted β†’ dotted line
  • double β†’ double line
  • groove β†’ 3D grooved effect
  • ridge β†’ 3D ridged effect
  • inset β†’ sunken effect
  • outset β†’ raised effect

3. Color

Defines the color of the border.

πŸ”Ή Examples:

  • red
  • #333
  • rgb(0, 0, 0)

πŸ’‘ Additional Values

  • initial β†’ Resets the element to default border settings
  • inherit β†’ Takes the border value from the parent element

🧱 Example Usages

CSS

div {
  border: 2px solid red; /* 2px thick, solid, red border */
}

CSS

p {
  border: thick dashed blue; /* thick, dashed, blue border */
}

CSS

img {
  border: none; /* removes border */
}

βš–οΈ Difference Between outline and border

Feature border outline
Position Inside element edge Outside the element
Affects layout Yes No
Takes up space Yes No
Border-radius support Yes No
Main use Design & structure Focus & highlighting

🧠 In Summary

The outline property draws a line around an element outside its border.

It does not affect layout or spacing.

It is mainly used for focus states and accessibilit.

It consists of three parts: width, style, and color.

The invert value helps maintain visibility on different backgrounds.

CSS Border
CSS Padding