border
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.
Die border
Kurzschrift CSS Eigenschaft legt den Rand eines Elements fest. Sie legt die Werte von border-width
, border-style
und border-color
fest.
Probieren Sie es aus
Zusammengesetzte Eigenschaften
Diese Eigenschaft ist eine Kurzschrift für die folgenden CSS-Eigenschaften:
Syntax
/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #f33;
/* width | style | color */
border: medium dashed green;
/* Global values */
border: inherit;
border: initial;
border: revert;
border: revert-layer;
border: unset;
Die border
Eigenschaft kann unter Verwendung eines, zweier oder dreier der unten aufgeführten Werte angegeben werden. Die Reihenfolge der Werte spielt keine Rolle.
Hinweis: Der Rand wird unsichtbar sein, wenn sein Stil nicht definiert ist. Dies liegt daran, dass der Stil standardmäßig auf none
gesetzt ist.
Werte
<line-width>
-
Legt die Dicke des Randes fest. Standardwert ist
medium
, falls nicht angegeben. Sieheborder-width
. <line-style>
-
Legt den Stil des Randes fest. Standardwert ist
none
, falls nicht angegeben. Sieheborder-style
. <color>
-
Legt die Farbe des Randes fest. Standardwert ist
currentcolor
, falls nicht angegeben. Sieheborder-color
.
Beschreibung
Wie bei allen Kurzschriften werden alle ausgelassenen Unterwerte auf ihren Anfangswert gesetzt. Wichtig ist, dass border
nicht verwendet werden kann, um einen benutzerdefinierten Wert für border-image
festzulegen, sondern stattdessen auf seinen Anfangswert gesetzt wird, d.h. none
.
Die border
-Kurzschrift ist besonders nützlich, wenn alle vier Ränder gleich sein sollen. Um sie jedoch unterschiedlich zu gestalten, können Sie die Langschrift-Eigenschaften border-width
, border-style
und border-color
verwenden, die unterschiedliche Werte für jede Seite akzeptieren. Alternativ können Sie einen Rand nach dem anderen mit den physikalischen (z.B. border-top
) und logischen (z.B. border-block-start
) Rand-Eigenschaften ansprechen.
Ränder vs. Umrisse
Ränder und Umrisse sind sehr ähnlich. Allerdings unterscheiden sich Umrisse von Rändern in folgenden Punkten:
- Umrisse nehmen nie Platz ein, da sie außerhalb des Inhalts eines Elements gezeichnet werden.
- Laut Spezifikation müssen Umrisse nicht rechteckig sein, obwohl sie dies normalerweise sind.
Formale Definition
Initialer Wert | 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
Beispiele
Einen rosa hervorstehenden Rand setzen
HTML
<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>
CSS
div {
border: 0.5rem outset pink;
outline: 0.5rem solid khaki;
box-shadow: 0 0 0 2rem skyblue;
border-radius: 12px;
font: bold 1rem sans-serif;
margin: 2rem;
padding: 1rem;
outline-offset: 0.5rem;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # propdef-border |
Browser-Kompatibilität
BCD tables only load in the browser