© 2023 AposTube

Learn CSS #19

June 15 • 11:14 am

Tags:

CSS Outline

An outline is a line drawn outside the element’s border.

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

CSS Outline

An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element “stand out”.

CSS has the following outline properties:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Note: 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.

CSS Outline Style

The outline-style property specifies the style of the outline, and 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
  • ridge – Defines a 3D ridged outline
  • inset – Defines a 3D inset outline
  • outset – Defines a 3D outset outline
  • none – Defines no outline
  • hidden – Defines a hidden outline

The following example shows the different outline-style values:

Example

Demonstration of the different outline styles:

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.

Apostube

See author's posts

Categories

Prev
Next

41 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2023 AposTube. Built with ❤️ using WordPress and Ketos Theme.