CSS/Eigenschaften/äußere Gestaltung/Rahmen/border-width

Sie können mit der Eigenschaft border-width für ein Element die Rahmendicke bestimmen. Sinnvollerweise sollten Sie diese Angabe zumindest mit einer Angabe zum Rahmentyp kombinieren, gegebenenfalls aber auch mit einer Festlegung der Rahmenfarbe.

alle Seiten eines Elements

Mit border-width: können Sie die Dicke des Rahmens um ein Element bestimmen.

• 
• 
• 
• 
• 
• 

Erlaubt ist eine numerische Angabe (mit Ausnahme von Prozentwerten) für die Rahmendicke oder einer der folgenden Werte:

• thin = dünn.
• medium = mittelstark.
• thick = dick.
• inherit = Übernehmen der Rahmendicke vom Elternelement.

Beachten Sie: Eine Angabe für die Rahmendicke wird nur interpretiert, wenn auch eine Angabe für den Rahmentyp erfolgt.

Beispiel ansehen …

p {
  width: 30em;
  padding: 0 1em;
}
	
.links {
  border-left-width: 5px;
  border-left-style: solid;
  border-color: #fcc;
}

.linksrechts {
  border-left-width: 1em;
  border-left-style: solid;
  border-left-color: red;
  border-right-width: 1.5em;
  border-right-style: solid;
  border-right-color: green;
}

.rundrum {
  background-color: lightgray;
  border-width: 6px;
  border-style: solid;
  border-color: gray;
  border-right-color: black;
  border-bottom-color: black;
}

<p class="links">Dies kennen Sie wahrscheinlich ...</p>
<p class="linksrechts">Dies ist ... Textabsatz mit einem Rahmen links und rechts.</p>
<p class="rundrum">Bereits mit einfachen Mitteln lassen sich interessante Effekte erzielen.</p>

ansehen …

einzelne Seiten eines Elements

Um für einzelne Seiten des Elements eine unterschiedliche Rahmendicke zu bestimmen, gelten bei Verwendung der Eigenschaft border-width folgende Regeln:

• Eine Angabe: für alle 4 Rahmen gilt derselbe Wert
• Zwei Angaben: 1. Wert für oben und unten, 2. Wert für links und rechts
• Drei Angaben: 1. Wert für oben, 2. Wert für links und rechts, 3. Wert für unten
• Vier Angaben: 1. Wert für oben, 2. Wert für rechts, 3. Wert für unten, 4. Wert für links

Beachten Sie: Die Werte werden nicht durch Kommata getrennt.

Außerdem können Sie auch entsprechende Werte für die Eigenschaften

• border-top-width, definiert die Rahmendicke für oben,
• border-right-width, die Rahmendicke für rechts,
• border-bottom-width, die Rahmendicke für unten und
• border-left-width, die Rahmendicke für links

setzen.