CSS Outlines

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

CSS Outline

  Do It Yourself

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:

  • outline
  • outline-style
  • outline-color
  • outline-width
  • outline-offset

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.

Example

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

  Do It Yourself

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".

The outline-width property will not work if it is used alone unless the outline-style property has been defined.

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.
The outline-color property does not work if it is used alone unless the outline-style property has been defined.

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.