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 setzt 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;
}
Komponenten-Eigenschaften
Diese Eigenschaft ist eine 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 border-width-Eigenschaft kann mit einem, zwei, drei oder vier Werten angegeben werden.
- Wenn ein Wert angegeben wird, wird die gleiche Breite auf alle vier Seiten angewendet.
- Bei zwei Werten gilt die erste Breite für oben und unten, die zweite für links und rechts.
- Bei drei Werten gilt die erste Breite für oben, die zweite für links und rechts, die dritte für unten.
- Bei vier Werten gelten die Breiten in der Reihenfolge oben, rechts, unten und links (im Uhrzeigersinn).
Werte
<line-width>-
Definiert die Breite des Rahmens, entweder als explizites nicht-negatives
<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 bei der Verwendung einer dieser Optionen spezifisch für die Implementierung. Dennoch folgen sie immer dem Muster thin ≤ medium ≤ thick, und die Werte sind innerhalb eines 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 rahmenbezogenen Shorthand-Eigenschaften:
border,border-style,border-color - Die rahmenbreitenbezogenen Eigenschaften:
border-bottom-width,border-left-width,border-right-width,border-top-width