CSS-Kontur

This element has a black border and a blue outline, 10px wide.

CSS-Kontur

The outline is a line drawn around the element, outside the border, to highlight the element.

CSS has the following outline properties:

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

Hinweis:Outline andBorderDifferent! The difference is that the outline is drawn outside the element's border and may overlap with other content. Similarly, the outline is not part of the element's size; the total width and height of the element are not affected by the width of the outline line.

CSS Outline Styles

The outline-style property specifies the outline style and can be set to the following values:

  • dotted - Define dotted outline.
  • dashed - Define dashed line outline.
  • solid - Define solid line outline.
  • double - Define double line outline.
  • groove - Define 3D sunken groove outline.
  • ridge - Define 3D raised groove outline.
  • inset - Define 3D sunken outline.
  • outset - Define 3D raised outline.
  • none - Define no outline.
  • hidden - Define hidden outline.

The following examples show different outline-style values:

Example

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

Ergebnis:

Punktförmige Outline.

Gezogene Outline.

Solide Outline.

Doppelte Outline.

3D tiefes Profil. Dieser Effekt hängt vom outline-color-Wert ab.

3D flache Outline. Dieser Effekt hängt vom outline-color-Wert ab.

3D eckige Outline. Dieser Effekt hängt vom outline-color-Wert ab.

3D abgerundete Outline. Dieser Effekt hängt vom outline-color-Wert ab.

Probieren Sie es selbst aus

Hinweis:es sei denn, es wurde gesetzt outline-style Attribute, andernfalls haben andere Outline-Attribute (die im nächsten Kapitel ausführlich erläutert werden) keine Wirkung!