CSS-Eigenschaft outline-width

Die Eigenschaft outline-width definiert die Breite eines Umrisses.

Es hat folgende Werte: medium, thick, thin.

Sie müssen zuerst die Eigenschaft outline-style definieren, bevor Sie die Eigenschaft outline-width festlegen können.
Anfangswert medium
Gilt für Alle Elemente
Geerbt Nein
Animierbar Ja, die Breite des Umrisses ist animierbar.
Version CSS2
DOM Syntax Object.style.outlineWidth = "thick";

Syntax

outline-width: medium | thin | thick | length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <title>Der Titel des Dokuments</title>
  <head>
    <style>
      .p1{
      outline-style: solid;
      outline-width: 5px;
      }
      .p2{
      outline-style: solid;
      outline-width: 0.4em;
      }
      .p3{
      outline-style: solid;
      outline-width: thin;
      }
      .p4{
      outline-style: solid;
      outline-width: medium;
      }
      .p5{
      outline-style: solid;
      outline-width: thick;
      }
      .p6{
      outline-style: solid;
      outline-width: 0.1cm;
      }
      .p7{
      outline-style: solid;
      outline-width: 1mm;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft outline-width</h2>
    <p class="p1">Das ist ein Absatz mit einem Umriss von 5px.</p>
    <p class="p2">Das ist ein Absatz mit einem Umriss von 0.5em.</p>
    <p class="p3">Das ist ein Absatz mit einem Umriss mit thin.</p>
    <p class="p4">Das ist ein Absatz mit einem Umriss mit medium.</p>
    <p class="p5">Das ist ein Absatz mit einem Umriss mit thick.</p>
    <p class="p6">Das ist ein Absatz mit einem Umriss mit 0.1cm.</p>
    <p class="p7">Das ist ein Absatz mit einem Umriss mit 1 mm.</p>
  </body>
</html>

Im folgenden Beispiel hat das erste Element keinen Rand, das zweite einen Rand. Beachten Sie, dass sich der Umriss des zweiten Elements außerhalb seines Randes befindet:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div.ex1 {
      outline-style: solid;
      outline-width: thick;  
      }
      div.ex2 {
      border: 2px solid #1c87c9;
      outline-style: solid;
      outline-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft outline-width</h2>
    <div class="ex1">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie...</div>
    <br>
    <div class="ex2">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie...</div>
  </body>
</html>

Werte

Wert Beschreibung
medium Definiert einen mittleren Umrisses. Das ist der Standardwert dieser Eigenschaft.
thin Definiert einen dünnen Umriss.
thick Definiert einen dicken Umriss.
length Definiert die Dicke des Umrisses.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
1.0+ 12.0+ 1.5+ 1.2+ 7.0+

Übe dein Wissen

Was kann man mit der CSS Eigenschaft 'outline-width' tun?
Finden Sie das nützlich?