CSS Outline

❮ Previous Home Next ❯

An outline is a line that is drawn outside the border edge of the elements.

Outlines are generally used to indicate focus or active states of the elements.




The CSS outline properties allow you to define an outline area around an element's box.

Live Demonstration:






content



div {
  border: 1px solid black;
  width: 300px;
  outline: dashed 5px green;
}



The following are outline properties:

CSS Outline Style

The outline-style property defines a style for an element’s outline.

The following example Demonstrate how to set the outline style to the element:

Example

h1 {
  outline: 2px black;
  outline-style: dotted;
}

p {
  outline: 5px red;
  outline-style: dashed;
}

Note: There will have ANY effect unless the outline-style property is set!




Outline Color

The outline-color property sets the color of an element’s outline.

The following example Demonstrate how to set the outline color to the element:

Example

h1 {
  outline: 2px dotted;
  outline-color: black;
}

p {
  outline: 5px dashed;
  outline-color: red;
}






Outline Width

The outline-width property defines a width for an element’s outline.

The following example Demonstrate how to set the outline width to the element:

Example

h1 {
  outline: dotted black;
  outline-width: 2px;
}

p {
  outline: dashed red;
  outline-width: thin;
}



Outline Offset

The outline-offset property defines a offset for an element’s outline.

The following example Demonstrate how to set the outline offset to the element:

Example

h1 {
  outline: 2px dotted black;
  outline-offset: 20px;
}

p {
  outline: 5px dashed red;
  outline-offset: 5px;
}



Outline Shorthand

The outline property is a shorthand form that sets all outline properties at once.

The following example Demonstrate how to set the outline style, color, width, and offset to the element using shorthand property:

Example

h1 {
  outline: 2px dotted black;
}

p {
  outline: 5px dashed red;
}



Note:




All CSS Outline Properties

Property Description
Alphabet-O outline A shorthand form that sets all outline properties at once.
Alphabet-O outline-color Sets the color of an element’s outline.
Alphabet-O outline-offset Defines a offset for an element’s outline.
Alphabet-O outline-style Defines a style for an element’s outline.
Alphabet-O outline-width Defines a width for an element’s outline.
❮ Previous Home Next ❯