BlogsDope image BlogsDope

CSS outline

March 21, 2021 CSS OUTLINE 760

Outlines are lines drawn around elements outside the borders. These do not take up any space and thus never influence the position or size of the element boxes. These are usually used for better accessibility or for making design attractive.

The outline property is a shorthand property which allows us to change the style, color and width of outlines by setting the values of the three outline properties- outline-style, outline-width and outline-color in a single declaration.

CSS

outline: [outline-style] [outline-width] [outline-color];

There is no specific order in which the three values are given in the declaration.

Values

The possible values which can be given for the three longhand properties are given below.

outline-style

This property is used to set the style of the outline of an element. It can take any of the following values. Its default value is none.

auto | none | dotted | dashed | solid | double | groove | ridge | inset | outset

outline-width

This is used to set the width of the outline of an element. It can take one of the following values. Its default value is medium.

<length> | thin | medium | thick

outline-color

This property is used to set the color of the outline of an element. It can take any of the following values. Its default value is invert.

<color> | invert

Apart from these, the outline property can also take the following universal values.

initial : Sets the initial value.

inherit : Sets the value of the parent element.

Note that you must define the outline-style property other than none for giving the outline-width and the outline-color values. This is because there is no outline present by default. So in order to give an outline width or color, you must first define an outline using the outline-style property.

Example

If one of the three values is not given in the declaration, then the default value of the corresponding property is given to the outline by the browser. This will become clear from the following example.

See the Pen outline property examples by Aakhya Singh (@aakhya) on CodePen.

The first div is given an outline of width 8px, color orange and type dotted. The outline of the second div is also of color orange and type dotted. Since the outline property of the second div is not given any outline width value, it takes the default value medium.

Difference between outline and border

Border and outline together gives the effect of double border. An outline is similar to a border as both are drawn around elements, but they differ in the below mentioned points.

1. Outlines do not take up space

An element's box model consists of the content area, the padding, the border and the margin. Outlines are not part of the box model, and thus do not take up any space on the webpage. Since an outline is not a part of the box model of an element, so it does not effect the dimensions (width or height) of the element i.e. the width and height properties do not contain the width of outlines. This also means that adding or removing an outline will have no effect on the position of the element in the layout.

See the Pen outline property example by Aakhya Singh (@aakhya) on CodePen.

As you can see, the span element in the div is given an orange colored outline which did not effect its position in the div or the layout.

2. Outlines do not take the shape of border

The corners of an outline cannot be made round. There is a property border-radius using which you can make the corners of a border round but there is no such outline-radius property for outlines.

See the Pen outline around rounded corner border by Aakhya Singh (@aakhya) on CodePen.

The above div is given border-radus: 50px which made the corners of the border rounded, but this sis not effect the shape of the outline.

3. Outlines are drawn on all the four sides of an element

You can give borders on any number of sides of an element, but that is not the case with outlines. An outline is drawn on all the four sides of an element.

See the Pen outline with border on two sides by Aakhya Singh (@aakhya) on CodePen.

In the above div, the div is given a yellow background color, an orange outline and borders on only the top and the left sides.

4. The distance between outline and border can be changed

You can change the distance between an outline and a border using the outline-offset property. You can even give negative values to this property which moves the outline inside the box model.

See the Pen outline-offset example by Aakhya Singh (@aakhya) on CodePen.

Browser Support

All major modern browsers support this property. However, the outline property is supported by IE 8 only if a !DOCTYPE is specified. The value invert is supported by only IE 8 and its higher versions and Edge. There is a non-standard property -moz-outline-radius which is supported by only Firefox.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).