border
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 Shorthand CSS Eigenschaft legt den Rahmen eines Elements fest. Sie setzt die Werte von border-width, border-style und border-color.
Probieren Sie es aus
border: solid;
border: dashed red;
border: 1rem solid;
border: thick double #32a1ce;
border: 4mm ridge rgb(211 220 50 / 0.6);
<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: #eeeeee;
color: darkmagenta;
padding: 0.75em;
width: 80%;
height: 100px;
}
Bestandteileigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #ff3333;
/* 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 spezifiziert werden. Die Reihenfolge der Werte spielt keine Rolle.
Hinweis:
Der Rahmen bleibt unsichtbar, 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 Rahmens fest. Voreinstellung ist
medium, wenn nicht angegeben. Sieheborder-width. <line-style>-
Legt den Stil des Rahmens fest. Voreinstellung ist
none, wenn nicht angegeben. Sieheborder-style. <color>-
Legt die Farbe des Rahmens fest. Voreinstellung ist
currentColor, wenn nicht angegeben. Sieheborder-color.
Beschreibung
Wie bei allen Kurzform-Eigenschaften werden weggelassene Unterwerte auf ihren Anfangswert gesetzt. Wichtig ist, dass border nicht verwendet werden kann, um einen benutzerdefinierten Wert für border-image festzulegen. Stattdessen wird es auf seinen Anfangswert gesetzt, d.h. none.
Die border-Kurzform ist besonders nützlich, wenn Sie möchten, dass alle vier Ränder gleich sind. Um jedoch unterschiedliche Werte für jeden Rand zu definieren, können Sie die Langform-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 physischen (z.B. border-top) und logischen (z.B. border-block-start) Rahmeneigenschaften ansprechen.
Borders vs. Outlines
Borders und Outlines sind sehr ähnlich. Allerdings unterscheiden sich Outlines von Borders in folgenden Punkten:
- Outlines nehmen nie Platz ein, da sie außerhalb des Inhalts eines Elements gezeichnet werden.
- Laut Spezifikation müssen Outlines nicht rechteckig sein, obwohl sie es normalerweise sind.
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:
|
Formaler Syntax
border =
<line-width> ||
<line-style> ||
<color>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Beispiele
Festlegen eines pinkfarbenen outset border
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
Loading…