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 Juli 2015.
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: black; border: 0 solid crimson; padding: 0.75em; width: 80%; height: 100px; } Zusammengesetzte Eigenschaften
Diese Eigenschaft ist ein Shorthand für die folgenden CSS-Eigenschaften:
Syntax
/* 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 Eigenschaft border-width kann unter Angabe von einem, zwei, drei oder vier Werten spezifiziert 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, 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, gelten die Breiten für oben, rechts, unten und links in dieser Reihenfolge (im Uhrzeigersinn).
Werte
<line-width>-
Definiert die Breite des Rahmens, entweder als explizite nicht-negative
<length>oder als Schlüsselwort. Wenn es ein Schlüsselwort ist, muss es einer der folgenden Werte sein:thinmediumthick
Hinweis: Da die Spezifikation die genaue Dicke, die durch jedes Schlüsselwort angegeben wird, nicht definiert, ist das genaue Ergebnis, wenn eines davon verwendet wird, implementationsspezifisch. Dennoch folgen sie immer dem Muster thin ≤ medium ≤ thick, und die Werte sind innerhalb eines einzelnen Dokuments konstant.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
|---|---|
| Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter. |
| Vererbt | Nein |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | wie die jeweiligen Kurzschreibweisen: |
Formale Syntax
border-width =
<'border-top-width'>{1,4}
<border-top-width> =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
Beispiele
Eine Mischung aus Werten und Längen
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
#one-value { border: ridge #cccccc; 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 # border-width |
Browser-Kompatibilität
Siehe auch
- Die Rahmen-bezogenen Shorthands:
border,border-style,border-color - Die Rahmenbreite-bezogenen Eigenschaften:
border-bottom-width,border-left-width,border-right-width,border-top-width