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 setzt den Rahmen eines Elements. 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

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 ist unerheblich.

Hinweis: Der Rahmen wird unsichtbar sein, wenn sein Stil nicht definiert ist. Dies liegt daran, dass der Stil standardmäßig auf none gesetzt ist.

Werte

<line-width>

Setzt die Dicke des Rahmens. Standardmäßig medium, wenn nicht angegeben. Siehe border-width.

<line-style>

Setzt den Stil des Rahmens. Standardmäßig none, wenn nicht angegeben. Siehe border-style.

<color>

Setzt die Farbe des Rahmens. Standardmäßig currentcolor, wenn nicht angegeben. Siehe border-color.

Beschreibung

Wie bei allen Kurzschrifteigenschaften werden alle ausgelassenen Teilwerte auf ihren Initialwert gesetzt. Wichtig ist, dass border nicht verwendet werden kann, um einen benutzerdefinierten Wert für border-image zu spezifizieren, sondern stattdessen wird es auf seinen Initialwert gesetzt, d.h. none.

Die border-Kurzschrift ist besonders nützlich, wenn Sie alle vier Rahmen gleich gestalten möchten. Um sie jedoch unterschiedlich zu gestalten, 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 Rahmen nach dem anderen mit den physischen (z.B. border-top) und logischen (z.B. border-block-start) Rahmeneigenschaften ansprechen.

Rahmen vs. Konturen

Rahmen und Konturen sind sehr ähnlich. Konturen unterscheiden sich jedoch in den folgenden Punkten von Rahmen:

  • Konturen benötigen keinen Platz, da sie außerhalb des Inhalts eines Elements gezeichnet werden.
  • Laut Spezifikation müssen Konturen nicht rechteckig sein, sind es aber in der Regel.

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

Festlegung eines rosa hervortretenden 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

BCD tables only load in the browser

Siehe auch