outline-style

Es ist oft praktischer, die Kurzschreibweiseigenschaft outline zu verwenden, wenn das Erscheinungsbild einer Umrandung definiert werden soll.

/* Keyword values */
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

/* Global values */
outline-style: inherit;
outline-style: initial;
outline-style: revert;
outline-style: revert-layer;
outline-style: unset;

Die outline-style Eigenschaft wird als einer der unten aufgeführten Werte angegeben.

auto

Ermöglicht dem User-Agent, einen benutzerdefinierten Umrandungsstil darzustellen.

none

Keine Umrandung wird verwendet. Die outline-width ist 0.

dotted

Die Umrandung ist eine Reihe von Punkten.

dashed

Die Umrandung ist eine Reihe von kurzen Liniensegmenten.

solid

Die Umrandung ist eine einzige Linie.

double

Die Umrandung besteht aus zwei einzelnen Linien. Die outline-width ist die Summe der beiden Linien und des Zwischenraums.

groove

Die Umrandung sieht aus, als wäre sie in die Seite geschnitzt.

ridge

Das Gegenteil von groove: Die Umrandung sieht aus, als wäre sie aus der Seite herausgehoben.

inset

Die Umrandung lässt die Box so aussehen, als wäre sie in die Seite eingebettet.

outset

Das Gegenteil von inset: Die Umrandung lässt die Box so aussehen, als käme sie aus der Seite heraus.

outline-style = 
  auto                  |
  <outline-line-style>  

Der auto-Wert zeigt einen benutzerdefinierten Umrandungsstil an, der in der Spezifikation beschrieben wird als "typischerweise ein Stil, der entweder ein Benutzeroberflächenstandard der Plattform ist oder vielleicht ein Stil, der reicher ist, als es in CSS im Detail beschrieben werden kann, z. B. eine Umrandung mit abgerundeten Kanten und halbtransluzenten äußeren Pixeln, die leuchtet".

HTML

<div>
  <p class="auto">Outline Demo</p>
</div>

CSS

.auto {
  outline-style: auto; /* same result as "outline: auto" */
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Ergebnis

HTML

<div>
  <div class="dotted">
    <p class="dashed">Outline Demo</p>
  </div>
</div>

CSS

.dotted {
  outline-style: dotted; /* same result as "outline: dotted" */
}
.dashed {
  outline-style: dashed;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Ergebnis

HTML

<div>
  <div class="solid">
    <p class="double">Outline Demo</p>
  </div>
</div>

CSS

.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Ergebnis

HTML

<div>
  <div class="groove">
    <p class="ridge">Outline Demo</p>
  </div>
</div>

CSS

.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Ergebnis

HTML

<div>
  <div class="inset">
    <p class="outset">Outline Demo</p>
  </div>
</div>

CSS

.inset {
  outline-style: inset;
}
.outset {
  outline-style: outset;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Ergebnis

• outline
• outline-width
• outline-color