Css Outlines

The outline CSS property is a shorthand to set various outline properties in a single declaration: outline-style, outline-width, and outline-color.

CSS Demo: outline

outline: solid;

Copy to Clipboard

outline: dashed red;

outline: 1rem solid;

outline: thick double #32a1ce;

outline: 8px ridge rgba(170, 50, 220, .6);

border-radius: 2rem;

As with all shorthand properties, any omitted sub-values will be set to their initial value.

Borders vs. outlinesSection

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

Outlines never take up space, as they are drawn outside of an element's content.
According to the spec, outlines don't have to be rectangular, although they usually are.

Syntax

/* style */ outline: solid; /* color | style */ outline: #f66 dashed; /* style | width */ outline: inset thick; /* color | style | width */ outline: green solid 3px; /* Global values */ outline: inherit; outline: initial; outline: unset;

The outline property may be specified using one, two, or three of the values listed below. The order of the values does not matter.

Note: The outline will be invisible if its style is not defined. This is because the style defaults to none.

Values

<'outline-color'> Sets the color of the outline. Defaults to currentcolor if absent. See outline-color. <'outline-style'> Sets the style of the outline. Defaults to none if absent. See outline-style. <'outline-width'> Sets the thickness of the outline. Defaults to medium if absent. See outline-width.

Formal syntaxSection

[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]

Example

HTML

<a href="#">This link has a special focus style.</a>

CSS

a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}

Result

« Previous Next »