CSS Outlines

An outline is a line that is drawn around elements (outside the outlines) to distinguish it.

The outline is not a part of an element's dimensions, and so the element's total width and height are not affected by the width or height of the outline. In CSS, outline can be styled in different ways using this CSS outline properties:

Syntax

selector {
  outline-style: solid|groove|ridge|double;
  outline-color: black; /* any value of type:color is supported */
  outline-width: thin|medium|thick|npx;
  outline-offset: npx; /* add spaces between border and the outline */
}

Outline Style

The outline-style property specifies what kind of outline to display.

.outline-class {
  outline-style: solid;
  outline-color: black;
  outline-width: 5px;
}

Outline Width

The outline-width property is used to set the width of the outline. The width can be set in pixels, or by using one of the three pre-defined values: "thin", "medium", or "thick".

See examples

div {
outline-style: solid;
outline-width: 3px;
} 

span { 
outline-style: solid;
outline-width: thick;
}

Outline Color

The outline-color property is used to set the color of the outline. The color can be set by:

• a HEX value - e.g "#FF00FF"
• an RGB value - e.g "rgb(255,0,0)"
• a color name - like "green"!
• a HSL - like "hsl(240,100%,50%)"
• You can also set to "transparent" if you do not want any color.

Example

p {
  outline-style: solid;
  outline-color: green;
}

span {
  outline-style: solid;
  outline-color: #FF00FF;
}

  Do It Yourself

Outline Shorthand Property

The outline styles can be derived at once using the outline shorthand property.

Examples

.outline-class {
outline: solid 3px black;
}

  Do It Yourself

What You Should Know at the End of This Lesson

• You should be able to tell briefly what CSS Outlines is all about.
• You should be able to style the individual outline with different styles.
• You should be able to style all the outlines using the outline shorthand property.