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>

Versuch es selber!

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>

Versuch es selber!

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.