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 setzt den Rahmen eines Elements. 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: #eee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Bestandteileigenschaften

Diese Eigenschaft ist eine Verkürzung 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 keine Rolle.

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>

Bestimmt die Dicke des Rahmens. Standardwert ist medium, wenn nicht angegeben. Siehe border-width.

<line-style>

Bestimmt den Stil des Rahmens. Standardwert ist none, wenn nicht angegeben. Siehe border-style.

<color>

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

Beschreibung

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

Die border-Shorthand ist besonders nützlich, wenn alle vier Rahmen gleich sein sollen. Um sie voneinander zu unterscheiden, können Sie jedoch die Langform border-width, border-style, und border-color Eigenschaften verwenden, 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) Rahmeneigenschaften ansprechen.

Rahmen vs. Umrisse

Rahmen und Umrisse sind sehr ähnlich. Sie unterscheiden sich jedoch 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 es normalerweise 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

Setzen eines rosa erhabenen 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

Siehe auch