WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Outline


CSS Outline Properties

Outlines are similar to borders ,An outline is a line drawn around an element - outside the border. This can be use to make an element "stand out".

The CSS outline properties specify the style, color, and width of an outline.

Outlines do not have to be rectangular.


CSS Outline

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

Outline is always the same on all sides.


Outline Style

The outline-style property specifies the style of the outline.

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

  • 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

The following example first sets a thin black border around each <p> element, then it shows the different outline-style values:

Example

p {
    border: 1px solid black;
    outline-color: red;
}

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;}

Result:

A dotted outline.

A dashed outline.

A solid outline.

A double outline.

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

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

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

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

Try it yourself »

Outline Color

The outline-color property is used to set the color of the outline.

The color can be set by:

  • name - specify a color name, like "red"
  • RGB - specify a RGB value, like "rgb(255,0,0)"
  • Hex - specify a hex value, like "#ff0000"
  • invert - performs a color inversion (which ensures that the outline is visible, regardless of color background)

Example

p {
    border: 1px solid black;
    outline-style: dashed;
    outline-color: hotpink;
}

Result:

A colored outline.

Try it yourself »

Outline Width

The outline-width property specifies the width of the outline.

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

Example

p {border: 1px solid black;}

p.one {
    outline-style: dotted;
    outline-color: yellow;
    outline-width: thick;
}

p.two {
    outline-style: double;
    outline-color: hotpink;
    outline-width: 3px;
}

Result:

A thick outline.

A thinner outline.

Try it yourself »

Outline - Shorthand property

To shorten the code, it is also possible to specify all the individual outline properties in one property.

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

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

Example

p {
    border: 1px groove black;
    outline: 5px dotted green;
}

Result:

An outline.

Try it yourself »