border-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die border-widthShorthandCSS Eigenschaft legt die Breite des Rahmens eines Elements fest.

Probieren Sie es aus

border-width: thick; 
border-width: 1em; 
border-width: 4px 1.25em; 
border-width: 2ex 1.25ex 0.5ex; 
border-width: 0 4px 8px 12px; 
<section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> This is a box with a border around it. </div> </section> 
#example-element { background-color: palegreen; color: #000; border: 0 solid crimson; padding: 0.75em; width: 80%; height: 100px; }

Bestandteileigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

Syntax

css
/* Keyword values */ border-width: thin; border-width: medium; border-width: thick; /* <length> values */ border-width: 4px; border-width: 1.2rem; /* top and bottom | left and right */ border-width: 2px 1.5em; /* top | left and right | bottom */ border-width: 1px 2em 1.5cm; /* top | right | bottom | left */ border-width: 1px 2em 0 4rem; /* Global values */ border-width: inherit; border-width: initial; border-width: revert; border-width: revert-layer; border-width: unset;

Die border-width Eigenschaft kann mit einem, zwei, drei oder vier Werten angegeben werden.

  • Wenn ein Wert angegeben wird, gilt dieselbe Breite für alle vier Seiten.
  • Wenn zwei Werte angegeben werden, gilt die erste Breite für oben und unten und die zweite für links und rechts.
  • Wenn drei Werte angegeben werden, gilt die erste Breite für oben, die zweite für links und rechts, die dritte für unten.
  • Wenn vier Werte angegeben werden, werden die Breiten in der Reihenfolge oben, rechts, unten und links angewendet (im Uhrzeigersinn).

Werte

<line-width>

Definiert die Breite des Rahmens, entweder als explizite nichtnegative <length> oder als Schlüsselwort. Wenn es ein Schlüsselwort ist, muss es einen der folgenden Werte haben:

  • thin
  • medium
  • thick

Hinweis: Da die Spezifikation die genaue Dicke, die durch jedes Schlüsselwort angegeben ist, nicht definiert, ist das genaue Ergebnis bei der Verwendung implementationsspezifisch. Dennoch folgen sie immer dem Muster thin ≤ medium ≤ thick, und die Werte sind innerhalb eines einzelnen Dokuments konstant.

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter.
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:

Formaler Syntax

border-width = 
<line-width>{1,4}

<line-width> = 
<length [0,∞]>|
thin|
medium|
thick

Beispiele

Eine Mischung aus Werten und Längen

HTML

html
<p id="one-value">one value: 6px wide border on all 4 sides</p> <p id="two-values"> two different values: 2px wide top and bottom border, 10px wide right and left border </p> <p id="three-values"> three different values: 0.3em top, 9px bottom, and zero width right and left </p> <p id="four-values"> four different values: "thin" top, "medium" right, "thick" bottom, and 1em left </p>

CSS

css
#one-value { border: ridge #ccc; border-width: 6px; } #two-values { border: solid red; border-width: 2px 10px; } #three-values { border: dotted orange; border-width: 0.3em 0 9px; } #four-values { border: solid lightgreen; border-width: thin medium thick 1em; } p { width: auto; margin: 0.25em; padding: 0.25em; }

Ergebnis

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-width

Browser-Kompatibilität

Siehe auch