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

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: #8b008b;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Bestandteileigenschaften

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 spielt keine Rolle.

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

Werte

<line-width>: Legt die Dicke des Rahmens fest. Standardmäßig medium, falls nicht angegeben. Siehe border-width.
<line-style>: Legt den Stil des Rahmens fest. Standardmäßig none, falls nicht angegeben. Siehe border-style.
<color>: Legt die Farbe des Rahmens fest. Standardmäßig currentcolor, falls nicht angegeben. Siehe border-color.

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 seinen Anfangswert, d.h. none, gesetzt wird.

Die Shorthand border ist besonders nützlich, wenn Sie möchten, dass alle vier Rahmen gleich sind. Um sie jedoch unterschiedlich zu gestalten, können Sie die Langform border-width, border-style und border-color Eigenschaften verwenden, die verschiedene 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) Rahmen-Eigenschaften ansprechen.

Rahmen vs. Umrisse

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

Umrisse beanspruchen nie Platz, 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

Anfangswert	wie die jeweiligen Kurzschreibweisen: `border-width`: wie die jeweiligen Kurzschreibweisen: `border-top-width`: `medium` `border-right-width`: `medium` `border-bottom-width`: `medium` `border-left-width`: `medium` `border-style`: wie die jeweiligen Kurzschreibweisen: `border-top-style`: `none` `border-right-style`: `none` `border-bottom-style`: `none` `border-left-style`: `none` `border-color`: wie die jeweiligen Kurzschreibweisen: `border-top-color`: `currentcolor` `border-right-color`: `currentcolor` `border-bottom-color`: `currentcolor` `border-left-color`: `currentcolor`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter`.
Vererbt	Nein
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `border-width`: wie die jeweiligen Kurzschreibweisen: `border-bottom-width`: die absolute Länge; `0` falls `border-bottom-style` `none` oder `hidden` ist `border-left-width`: die absolute Länge; `0` falls `border-left-style` `none` oder `hidden` ist `border-right-width`: die absolute Länge; `0` falls `border-right-style` `none` oder `hidden` ist `border-top-width`: die absolute Länge; `0` falls `border-top-style` `none` oder `hidden` ist `border-style`: wie die jeweiligen Kurzschreibweisen: `border-bottom-style`: wie angegeben `border-left-style`: wie angegeben `border-right-style`: wie angegeben `border-top-style`: wie angegeben `border-color`: wie die jeweiligen Kurzschreibweisen: `border-bottom-color`: berechnete Farbe `border-left-color`: berechnete Farbe `border-right-color`: berechnete Farbe `border-top-color`: berechnete Farbe
Animationstyp	wie die jeweiligen Kurzschreibweisen: `border-width`: wie die jeweiligen Kurzschreibweisen: `border-bottom-width`: Längenangabe `border-left-width`: Längenangabe `border-right-width`: Längenangabe `border-top-width`: Längenangabe `border-style`: diskret `border-color`: wie die jeweiligen Kurzschreibweisen: `border-bottom-color`: Farbe `border-left-color`: Farbe `border-right-color`: Farbe `border-top-color`: Farbe

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

Einstellung 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