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.

We'd love to hear more about your role and the company you work for
Please help us by answering a few questions.

Die border-width Shorthand CSS 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