CSS Outline

CSS outline is just like CSS border property. It facilitates you to draw an extra border around an element to get visual attention.

CSS has the following outline properties:

outline

outline-style

outline-color

outline-width

outline-offset

Outline Style

The outline-style property specifies the style of the outline, and can have one of the following values:

• none: No border. (Equivalent of outline-width:0;)

• solid: Outline is a single solid line.

• dotted: Outline is a series of dots.

• dashed: Outline is a series of short lines.

• double: Outline is two solid lines.

• groove: Outline looks as though it is carved into the page.

• ridge: Outline looks the opposite of groove.

• inset: Outline makes the box look like it is embedded in the page.

• outset: Outline makes the box look like it is coming out of the canvas.

• hidden: Same as none.

Example -

p.dotted {outline-style: dotted;} p.dashed {outline-style: dashed;} p.solid {outline-style: solid;} p.double {outline-style: double;} p.groove {outline-style: groove;} p.ridge {outline-style: ridge;} p.inset {outline-style: inset;} p.outset {outline-style: outset;}

Run Example

The outline-color Property

The outline-color property allows you to specify the color of the outline. Its value should either be a color name, a hex color, or an RGB value, as with the color and border-color properties.

Example -

<p style="outline-width:thin; outline-style:solid;outline-color:red"> <p style="outline-width:thick; outline-style:dashed;outline-color:#009900"> <p style="outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">

Run Example

Outline Width

The outline-width property specifies the width of the outline, and can have one of the following values:

thin (typically 1px)

thick (typically 5px)

medium (typically 3px)

A specific size (in px, pt, cm, em, etc)

Example -

p.ex1 { border: 1px solid black; outline-style: solid; outline-color: red; outline-width: thin; } p.ex2 { border: 1px solid black; outline-style: solid; outline-color: red; outline-width: medium; } p.ex3 { border: 1px solid black; outline-style: solid; outline-color: red; outline-width: thick; } p.ex4 { border: 1px solid black; outline-style: solid; outline-color: red; outline-width: 4px; }

Run Example

Outline - Shorthand property

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

• outline-width
• outline-style (required)
• outline-color

The outline property is specified as one, two, or three values from the list above. The order of the values does not matter.

Example -

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

Run Example

Outline Offset

The outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.

Example -

p { margin: 30px; border: 1px solid black; outline: 1px solid red; outline-offset: 15px; }

Run Example