---
title: border-style
slug: Web/CSS/border-style
tags:
  - CSS
  - CSS Referenz
translation_of: Web/CSS/border-style
---
<div>{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <strong><code>border-style</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft ist eine Kurzschreibweise zum Setzen des Linienstils für alle vier Seiten des Elementrands.</p>

<div class="note"><strong>Hinweis:</strong> Der Standardwert von <code>border-style</code> ist <code>none</code>. Das bedeutet, falls die {{cssxref("border-width")}} und die {{cssxref("border-color")}} geändert werden, wird der Rand nicht angezeigt, solange diese Eigenschaft nicht auf etwas anderes als <code>none</code> oder <code>hidden</code> gesetzt wird.</div>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: css notranslate">/* Auf alle vier Seiten anwenden */
border-style: dashed;

/* horizontal | vertikal */
border-style: dotted solid;

/* open | horizontal | vertikal */
border-style: hidden double dashed;

/* open | rechts | unten | links */
border-style: none solid dotted dashed;

/* Global values */
border-style: inherit;
border-style: initial;
border-style: unset;
</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><code>&lt;br-style&gt;</code></dt>
 <dd>Ist ein Schlüsselwort, das den Stil des unteren Rahmens beschreibt. Es kann die folgenden Werte annehmen:
 <table class="standard-table">
  <tbody>
   <tr>
    <td style="vertical-align: middle;"><code>none</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">Wie beim <code>hidden</code> Schlüsselwort wird kein Rahmen angezeigt. In diesem Fall sind die berechneten Werte von {{cssxref("border-width")}} <code>0</code>, außer ein Hintergrundbild ist gesetzt, auch wenn die Eigenschaft anders gesetzt wurde. Im Fall von Zusammenfallen von Tabellenzellen und Rahmen hat der <code>none</code> Wert die niedrigste Priorität: Das bedeutet, dass falls irgendein anderer, gegensätzlicher Rahmen gesetzt ist, wird er angezeigt.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>hidden</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; border-style: hidden; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">Wie beim <code>none</code> Schlüsselwort wird kein Rahmen angezeigt. In diesem Fall sind die berechneten Werte von {{cssxref("border-width")}} <code>0</code>, außer ein Hintergrundbild ist gesetzt, auch wenn die Eigenschaft anders gesetzt wurde. Im Fall von Zusammenfallen von Tabellenzellen und Rahmen hat der <code>hidden</code> Wert die höchste Priorität: Das bedeutet, dass falls irgendein anderer, gegensätzlicher Rahmen gesetzt ist, wird er nicht angezeigt.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>dotted</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; border-style: dotted; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">Zeigt eine Reihe von runden Punkten an. Die Abstände der Punkte werden nicht durch die Spezifikation bestimmt und sind implementationsspezifisch. Der Radius der Punkte ist die halbe {{cssxref("border-width")}}.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>dashed</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; border-style: dashed; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">Zeigt eine Reihe von kurzen Strichen mit quadratischen Enden oder Liniensegmenten an. Die exakte Größe und Länger der Segmente werden nicht durch die Spezifikation bestimmt und sind implementationsspezifisch.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>solid</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; border-style: solid; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">Zeigt eine einfache, gerade, ausgefüllte Linie an.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>double</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; border-style: double; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">Zeigt zwei gerade Linien an, die zum Pixelwert hinzugefügt werden, der durch {{cssxref("border-width")}} definiert wird.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>groove</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; border-style: groove; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">Zeigt einen Rahmen an, der zu einem eingeritzten Effekt führt. Er ist das Gegenteil von <code>ridge</code>.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>ridge</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; border-style: ridge; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">Zeigt einen Rahmen mit einem 3D-Effekt an, so als ob es aus der Seite herauskommt. Er ist das Gegenteil von <code>groove</code>.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>inset</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; border-style: inset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">Zeigt einen Rahmen an, der die Box so darstellt, als wäre sie eingelassen. Es ist das Gegenteil von <code>outset</code>. Auf eine Tabellenzelle mit {{cssxref("border-collapse")}} auf collapsed gesetzt angewendet, verhält sich dieser Wert wie groove.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>outset</code></td>
    <td style="vertical-align: middle;">
     <div style="border-width: 3px; border-style: outset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">
     <p>Zeigt einen Rahmen an, der die Box in 3D wie geprägt darstellt. Es ist das Gegenteil von <code>inset</code>. Auf eine Tabellenzelle mit {{cssxref("border-collapse")}} auf <code>collapsed</code> gesetzt angewendet, verhält sich dieser Wert wie <code>ridge</code>.</p>
    </td>
   </tr>
  </tbody>
 </table>
 </dd>
</dl>

<h3 id="Formale_Syntax">Formale Syntax</h3>

{{csssyntax}}

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Tabelle_mit_allen_Eigenschaftswerten">Tabelle mit allen Eigenschaftswerten</h3>

<p>Hier ist ein Beispiel aller Eigenschaftswerte.</p>

<h4 id="HTML_Inhalt">HTML Inhalt</h4>

<pre class="brush: html notranslate">&lt;table&gt;
  &lt;tr&gt;
    &lt;td class="b1"&gt;none&lt;/td&gt;
    &lt;td class="b2"&gt;hidden&lt;/td&gt;
    &lt;td class="b3"&gt;dotted&lt;/td&gt;
    &lt;td class="b4"&gt;dashed&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td class="b5"&gt;solid&lt;/td&gt;
    &lt;td class="b6"&gt;double&lt;/td&gt;
    &lt;td class="b7"&gt;groove&lt;/td&gt;
    &lt;td class="b8"&gt;ridge&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td class="b9"&gt;inset&lt;/td&gt;
    &lt;td class="b10"&gt;outset&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</pre>

<h4 id="CSS_Inhalt">CSS Inhalt</h4>

<pre class="brush: css notranslate">/* Definiert das Aussehen der Tabelle */
table {
  border-width: 3px;
  background-color: #52E396;
}

tr, td {
  padding: 2px;
}

/* border-style Beispielklassen */
.b1 { border-style: none; }
.b2 { border-style: hidden; }
.b3 { border-style: dotted; }
.b4 { border-style: dashed; }
.b5 { border-style: solid; }
.b6 { border-style: double; }
.b7 { border-style: groove; }
.b8 { border-style: ridge; }
.b9 { border-style: inset; }
.b10  { border-style: outset; }</pre>

<h4 id="Ausgabe">Ausgabe</h4>

<p>{{EmbedLiveSample('Tabelle_mit_allen_Eigenschaftswerten', 300, 200)}}</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#border-style', 'border-style')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>Keine Änderung</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>2-, 3- und 4-Wert-Syntaxen hinzugefügt</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#border-style', 'border-style')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<p>{{Compat("css.properties.border-style")}}</p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>Die Rahmen-bezogenen Kurzschreibweise CSS Eigenschaften: {{cssxref("border")}}, {{cssxref("border-width")}}, {{cssxref("border-color")}}, {{cssxref("border-radius")}}</li>
</ul>