Outline Shorthand

CSS Outline - Shorthand property

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

• outline-width

• outline-style (required)

• outline-color

You can specify one, two, or three values from the list above. The order of the values does not matter.

CSS Outline Shorthand Examples

Here are some different outlines specified with the shorthand outline property:

A dashed outline.

A dotted red outline.

A 7px solid yellow outline.

A thick ridge pink outline.

Example

p.ex1
{outline: dashed;}
p.ex2
{outline: dotted red;}
p.ex3
{outline: 7px solid yellow;}
p.ex4
{outline: thick ridge pink;}

CSS Outline With Rounded Corners

Outlines can also have rounded corners.

The border-radius property is used to add rounded borders to an element.

Here are some different outlines with rounded corners:

A dashed outline.

A dotted red outline.

A 7px solid yellow outline.

A thick ridge pink outline.

Example

p.ex1 {
  outline: dashed;
  border-radius: 8px;
}

p.ex2 {

  outline: dotted red;
  border-radius: 5px;
}

p.ex3 {

  outline: 7px solid yellow;
  border-radius: 5px;
}

p.ex4 {

  outline: thick ridge pink;
  border-radius: 8px;
}

p.ex5 {
  outline:
  thick solid green;
  border-radius: 10px;
}