CSS Lesson 14: Outline


Introduction to CSS Outline

A CSS outline is a line outside the Border and drawn in. The outline’s value doesn’t affect the Box Model’s width or height.

Difference between Outline and Border

You might be thinking, if outline doesn’t have significance importance then why are we teaching you? You have better things to do, like watch TV or take a nap! Well, actually, both outline and border seem the same, but there are a few differences in their usage. So stick around and we’ll get you set straight. This should clear it up:

  • Outlines do not take any space.
  • They are usually use for debugging i.e. sometimes you cannot identify the element and an outline can helps you.
  • Outlines are non-rectangular.

Normally, an outline doesn’t affect your design. As mentioned above, if you add the outline property, it would not affect the height and width of your Box Model.

Outline Properties

As both the outline and border are pretty much similar in nature, their properties are also similar in nature.

Color – Outline

Outline’s color can be defined in RGB, hex code and name. Here’s the syntax of it:

Style – Outline

Outline style properties are similar to the border properties: solid, dashed, double etc. Here’s the syntax of it:

Outline Shorthand

CSS outline property is the shorthand of Outline. The sequence of the outline shorthand is:

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

p {
outline-style: 2px solid black;


  • Outline property doesn’t affect the box mode.
  • CSS outline does not take up any space.
  • Outline proprieties are style, width and color.

Next Lesson

Rolling right along in CSS. Let’s move on to the next lesson, smarty! Pseudo-class

Leave a Reply