CSS-Eigenschaft border

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 Kurzschreibweise für die folgenden CSS-Eigenschaften:

• border-width
• border-style
• border-color

Nur-zurücksetzende Untereigenschaften

Diese Eigenschaft setzt die folgenden CSS-Eigenschaften auf ihre Anfangswerte zurück:

• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width

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;

Werte

Diese Eigenschaft wird als durch Leerzeichen getrennte Liste aus einem bis drei der folgenden Werte angegeben:

<line-width>

Legt die Dicke des Rahmens fest. Falls nicht angegeben, ist der Standardwert medium. Siehe border-width.

<line-style>

Legt den Stil des Rahmens fest. Falls nicht angegeben, ist der Standardwert none. Siehe border-style.

<color>

Legt die Farbe des Rahmens fest. Falls nicht angegeben, ist der Standardwert currentColor. Siehe border-color.

Beschreibung

Die Kurzschreibweise border legt die Breite, den Stil und die Farbe aller vier Seiten des Rahmens eines Elements fest. Sie wird mit einem, zwei oder allen drei Werten der Komponenteneigenschaften in beliebiger Reihenfolge angegeben.

Alle ausgelassenen Teilwerte werden auf ihren Anfangswert gesetzt. Damit ein Rahmen angezeigt wird, muss die Komponente <line-style> festgelegt sein, da der Stil standardmäßig none ist.

Wichtig ist, dass border nicht verwendet werden kann, um einen benutzerdefinierten Wert für border-image anzugeben, sondern diesen stattdessen auf seinen Anfangswert, also none, setzt.

Die Kurzschreibweise border ist besonders nützlich, wenn alle vier Rahmen gleich sein sollen. Um sie jedoch voneinander zu unterscheiden, können Sie die Langschreibweisen border-width, border-style und border-color verwenden, die unterschiedliche Werte für jede Seite akzeptieren. Alternativ können Sie jeweils einen Rahmen mit den physischen (z. B. border-top) und logischen (z. B. border-block-start) Rahmeneigenschaften ansprechen.

Rahmen im Vergleich zu Umrissen

Rahmen und Umrisse sind sehr ähnlich. Umrisse unterscheiden sich jedoch von Rahmen auf folgende Weise:

• Umrisse nehmen niemals Platz ein, da sie außerhalb des Inhalts eines Elements gezeichnet werden.
• Gemäß der Spezifikation müssen Umrisse nicht rechteckig sein, obwohl sie es gewöhnlich sind.

Formale Definition

Formale Syntax

border = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

Beispiele

Festlegen eines rosafarbenen outset-Rahmens

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

Browser-Kompatibilität

Siehe auch

• border-width
• border-style
• border-color
• outline
• Hintergründe und Rahmen
• CSS lernen: Hintergründe und Rahmen