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 Abkürzung 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 eine Abkürzung 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 mit einem, zwei, drei oder vier Werten angegeben werden.
- Wenn ein Wert angegeben wird, gilt die gleiche 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 in der Reihenfolge oben, rechts, unten und links (im Uhrzeigersinn).
Werte
<line-width>-
Definiert die Breite des Rahmens, entweder als explizite nicht-negative
<length>oder als Schlüsselwort. Wenn es sich um ein Schlüsselwort handelt, muss es einer der folgenden Werte sein:thinmediumthick
Hinweis:
Da die Spezifikation die genaue Dicke, die durch jedes Schlüsselwort bezeichnet wird, nicht definiert, ist das genaue Ergebnis bei der Verwendung eines von ihnen implementationsspezifisch. Dennoch folgen sie immer dem Muster thin ≤ medium ≤ thick, und die Werte sind innerhalb eines einzigen 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 =
<line-width>{1,4}
<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
Loading…
Siehe auch
- Die Rahmen-bezogenen Abkürzungseigenschaften:
border,border-style,border-color - Die Rahmenbreite-bezogenen Eigenschaften:
border-bottom-width,border-left-width,border-right-width,border-top-width