CSS outline Property

CSS outline property is a shorthand property for setting all the outline properties in one statement.

CSS outline property all values are optional except outline-style.

Following properties can be sets,

Usages

The following table outline the usages and version history of this property.

Default value: See individual properties
Applies to: All elements
Inherited: No
Version: CSS2
JavaScript Syntax: object.style.outline = "2px solid grey"

Syntax

Here is a syntax for the CSS outline property

outline: outline-width outline-style outline-color | initial | inherit;

Property Values

The following table describes the values of this property.

Value Description
outline-width Specifies the width of the outline of an element
outline-style Specifies the style of the outline of an element
outline-color Specifies the color of the outline of an element
transparent value also accepted here
initial Sets default value of this property
inherit Inherits this property from its parent element.

Examples

The example below shows to sets outline width, style, color values.

.outline-1 {
  outline: 5px solid pink;
}
.outline-2 {
  outline: 5px dashed pink;
}
.outline-3 {
  outline: 5px dotted pink;
}
.outline-4 {
  outline: 5px double pink;
}
.outline-5 {
  outline: 5px groove pink;
}
.outline-6 {
  outline: 5px ridge pink;
}
.outline-7 {
  outline: 5px inset pink;
}
.outline-8 {
  outline: 5px outset pink;
}
.outline-9 {
  outline: 5px hidden pink;
}
.outline-10 {
  outline: none;
}

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1.5+
  • Internet Explorer 8+
  • Opera 7+
  • Safari 1.2+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.