Style outline property

Definition and Usage

outline Properties set or return all outline properties in a shorthand form.

With this property, you can set/return the following one or more (in any order):

The outline is a line around the element. It appears around the element's margin. However, it is different from border property Different.

The outline is not part of the element's size, so the width and height properties of the element do not include the outline width.

See Also:

CSS Tutorial:CSS Outline

CSS Reference Manual:outline property

Example

Example 1

Add an outline around the <div> element:

document.getElementById("myDiv").style.outline = "thick solid #0000FF";

Try It Yourself

Example 2

Change the width, style, and color of the <div> element's outline:

document.getElementById("myDiv").style.outline = "5px dotted green";

Try It Yourself

Example 3

Returns the outline property value of the <div> element:

alert(document.getElementById("myDiv").style.outline);

Try It Yourself

Syntax

Returns the outline property:

object.style.outline

Sets the outline property:

object.style.outline = "width style color|initial|inherit"

Property Value

Value Description
width Sets the outline width.
style Sets the outline style.
color Sets the outline color.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: medium none invert
Return Value: A string that represents the outline width, style, and/or color of an element.
CSS Version: CSS2

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
supported supported supported supported supported