CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Outline

An outline is a line that is drawn around elements, outside the borders.

This element has a black border and a green outline with a width of 10px.

Outlines are very similar to borders, but there are few major differences as well:

  • An outline does not take up space
  • Outlines do not have to be rectangular
  • Outline is always the same on all sides; you cannot specify different values for different sides of an element

CSS has the following outline properties:

  • outline-style - specifies whether an outline should be solid, dashed line, double line, or one of the other possible values
  • outline-width - specifies the width of an outline
  • outline-color - specifies the color of an outline
  • outline-offset - adds space between an outline and the border of an element
  • outline - a shorthand property for setting outline-width, outline-style, and outline-color in one declaration

Outline Style

The outline-style property sets the style of an element's outline.

The following values are allowed:

  • dotted - Defines a dotted outline
  • dashed - Defines a dashed outline
  • solid - Defines a solid outline
  • double - Defines a double outline
  • groove - Defines a 3D grooved outline. The effect depends on the outline-color value
  • ridge - Defines a 3D ridged outline. The effect depends on the outline-color value
  • inset - Defines a 3D inset outline. The effect depends on the outline-color value
  • outset - Defines a 3D outset outline. The effect depends on the outline-color value
  • none - Defines no outline
  • hidden - Defines a hidden outline

A dotted outline.

A dashed outline.

A solid outline.

A double outline.

A groove outline. The effect depends on the outline-color.

A ridge outline. The effect depends on the outline-color.

An inset outline. The effect depends on the outline-color.

An outset outline. The effect depends on the outline-color.

Run code

Outline Width

The outline-width property sets the width of an element's outline.

The width can be set as a specific size (in px, em, rem, etc) or by using one of the three pre-defined values: thin, medium, or thick.

outline-width: thin;

outline-width: 5px;

outline-width: 10px;

Run code

Outline Color

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

outline-color: #ec181e;

outline-color: blue;

outline-color: #4caf50;

Run code

Colors in CSS most often specified by the following methods:

  • color name - like "lightgreen"
  • HEX value - like "#4285f4"
  • RGB value - like "rgb(19, 207, 19)"

Look at CSS Color Values for a complete list of possible color values.


Outline - Shorthand Property

The outline property is a shorthand property for setting the following individual outline properties in a single declaration:

Run code

Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.

Some browser automatically add outline to <input> and <textarea> elements when onfocus event occurs. To prevent this, set outline: 0;


Outline Offset

The outline-offset property sets the amount of space between an outline and the edge or border of an element.

The space between an element and its outline is transparent.

This element has a black border and an outline-offset 20px outside the border.

Run code

CSS Outline properties

Property Description
outline A shorthand property for setting outline-width, outline-style, and outline-color in one declaration
outline-color Sets the color of an outline
outline-offset Specifies the space between an outline and the edge or border of an element
outline-style Sets the style of an outline
outline-width Sets the width of an outline