Applying Outline to an Element with CSS

The property used to add outline is the outline property. It is a shorthand property that allows you to set the style, width, and color of the outline of an element and is non-inherited. The longhand properties are outline-style, outline-width, and outline-color. The property is similar to the border property, introduced earlier, in that its size can be affected by padding, but it is also different in a number of ways, for example:

  • Unlike border, it does not take up space. Rather, it is placed, like a layer, on top of an element’s box, which means that, ordinarily, if it has the same styling as a border, it is indistinguishable.
  • Unlike border, the edges of outline cannot be styled individually.
  • Unlike border, it may be non-rectangular.

The values supported by the outline property are listed in Table 10.17. The values can be specified in any order. Where one is missing, its initial value is used.

Figure 10.65 shows how the property is used, and Figure 10.66 depicts the result. The border property is also used for comparison. The outline is dashed, and the border is solid line. Notice the identical positioning of the two properties.

1. outline-offset

The outline-offset property is non-inherited. It allows you to specify a transparent space between an outline and the border of an element. The only  value that it takes is a length value, such as px and em. A negative value draws outline inside border and the element. Figures 10.67 and 10.68 show how it is used and the result.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *