Hit enter after type your search item

What is CSS outline property?

For making an element like div, paragraph, image etc. prominent or different than other elements, you may use the outline property of CSS.

The outline property draws a line outside of the elements. Its purpose is to give particular emphasis to an element.

You may wonder, the border property also does the “same” – draw an outer line in the specified element but there are differences:

  • Unlike the border property, you may not specify different properties for each side (top, bottom, left, and right).
  • Outline differs from border property in its placement. Border line is placed at the edge of an element, thus encasing the content of elements within the boundaries of that element.
  • The outline property goes beyond the boundary of the element. In that way, they appear outside of the element.
  • As the outline goes beyond the border, so it may overlap the other content.

Have a look at few demos to understand how outline CSS property works and differs from border property.

Outline Vs Border – See the difference

In this example, I used both border and outline properties to show the difference between the two. For that, we have a div and some text.

The border is specified with various colors for each direction while the outer line is the “outline” property of CSS in blue.

css outline border

See online demo and code

The outline may overlap content example

As mentioned earlier, one of the differences between outline and border properties is that the outline may overlap the content of adjacent elements.

For showing the difference, we have two example codes below. In the first code snippet, two div elements with the same outline specifications except for color are created.

In the second snippet, only the border is replaced with the outline with the same specifications. See the different:

css outline border

Snippet 1 with outline:

Snippet 2 with border:

You may spot the difference easily, as the orange line in the case of outline property overlaps the first div text. In the case of the border, both elements are separate and do not overlap.

The outline properties – multi declaration example

In the above examples, we specified outline properties in a single declaration. For example:

outline: orange solid 5px;

There, the following outline properties are set:

  1. outline-color
  2. outline-style
  3. outline-width

Rather than providing outline in a single declaration, you may also provide individual properties separately.

The example below shows how:

css outline properties

See online demo and code

The example of all possible outline style values

For the outline-style property, you may provide any of these values:

  1. Solid
  2. Dotted
  3. Dashed
  4. Double
  5. Groove
  6. Ridge
  7. Inset
  8. Outset
  9. None
  10. Hidden

The example below shows using many of these values that are applied to various div elements.

css outline styles

See online demo and code

Learn more about CSS border property.
This div height required for enabling the sticky sidebar