Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
border-width CSS-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die border-width Kurzschreibweise CSS-Eigenschaft setzt die Breite des Rahmens eines Elements.
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 Kurzschreibweise 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 ist, gilt dieselbe Breite für alle vier Seiten.
- Bei zwei angegebenen Werten gilt die erste Breite für oben und unten, die zweite für links und rechts.
- Bei drei angegebenen Werten gilt die erste Breite für oben, die zweite für links und rechts, die dritte für unten.
- Bei vier angegebenen Werten gelten die Breiten der Reihe nach (im Uhrzeigersinn) für oben, rechts, unten und links.
Werte
<line-width>-
Definiert die Breite des Rahmens, entweder als explizite nicht-negative
<length>oder als Schlüsselwort. Falls es sich um ein Schlüsselwort handelt, muss es einer der folgenden Werte sein:thin- Entspricht
1px.
- Entspricht
medium- Entspricht
3px.
- Entspricht
thick- Entspricht
5px.
- Entspricht
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,∞]> |
hairline |
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 #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
| Spezifikation |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-width |
Browser-Kompatibilität
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.
Siehe auch
- Die rahmenbezogenen Kurzschreibweisen:
border,border-style,border-color - Die eigenschaften bezogen auf
border-width:border-bottom-width,border-left-width,border-right-width,border-top-width