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 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

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Shorthand-Eigenschaft für die folgenden CSS-Eigenschaften:

Syntax

css
/* 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 mit einem, zwei oder drei der unten aufgeführten Werte angegeben werden. Die Reihenfolge der Werte spielt dabei 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. Standardwert ist medium, falls kein Wert angegeben wurde. Siehe border-width.

<line-style>

Legt den Stil des Rahmens fest. Standardwert ist none, falls kein Wert angegeben wurde. Siehe border-style.

<color>

Legt die Farbe des Rahmens fest. Standardwert ist currentcolor, falls kein Wert angegeben wurde. Siehe border-color.

Beschreibung

Wie bei allen Shorthand-Eigenschaften werden alle ausgelassenen Unterwerte auf ihren Initialwert gesetzt. Wichtig ist, dass border nicht verwendet werden kann, um einen benutzerdefinierten Wert für border-image festzulegen, sondern stattdessen auf seinen Initialwert (none) gesetzt wird.

Das border-Shorthand ist besonders nützlich, wenn alle vier Rahmen gleich sein sollen. Sollten sie jedoch unterschiedlich sein, können die Langformen border-width, border-style und border-color verwendet werden, die unterschiedliche Werte für jede Seite akzeptieren. Alternativ können Sie jeden Rahmen einzeln mit den physischen (z. B. border-top) und logischen (z. B. border-block-start) Rahmen-Eigenschaften ansprechen.

Rahmen vs. Umrisse

Rahmen und Umrisse sind sehr ähnlich. Jedoch unterscheiden sich Umrisse von Rahmen in folgenden Punkten:

  • Umrisse nehmen keinen Platz ein, da sie außerhalb des Inhalts eines Elements gezeichnet werden.
  • Laut Spezifikation müssen Umrisse nicht rechteckig sein, obwohl sie es in der Regel sind.

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter.
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:

Formale 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 äußeren Rahmens

HTML

html
<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>

CSS

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch