---
title: border-left-style
slug: Web/CSS/border-left-style
tags:
  - CSS
  - CSS Referenz
translation_of: Web/CSS/border-left-style
---
<p>{{ CSSRef() }}</p>
<h2 id="Übersicht">Übersicht</h2>
<p>Die <code>border-left-style</code> Eigenschaft legt die Rahmenart des linken Rahmens fest.</p>
<ul>
 <li>Standardwert: <code>none</code></li>
 <li>Anwendbar auf: Alle Elemente</li>
 <li>Vererbbar: Nein</li>
 <li>Prozentwerte: Nein</li>
 <li>Medium: visuell</li>
 <li>berechneter Wert: wie festgelegt</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="eval">border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
</pre>
<h2 id="Werte">Werte</h2>
<dl>
 <dt>
  none</dt>
 <dd>
  Standardwert. Es wird kein linker Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.</dd>
 <dt>
  hidden</dt>
 <dd>
  Genau wie bei <code>none</code> wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.<br>
  Wenn <a href="/de/CSS/border-collapse" title="de/CSS/border-collapse"><code>border-collapse: collapse</code></a> gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.</dd>
 <dt>
  dotted</dt>
 <dd>
  Punktierte Linie.</dd>
 <dt>
  dashed</dt>
 <dd>
  Gestrichelte Linie.</dd>
 <dt>
  solid</dt>
 <dd>
  Durchgehende Linie.</dd>
 <dt>
  double</dt>
 <dd>
  Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a> Angabe groß.</dd>
 <dt>
  groove</dt>
 <dd>
  Der Rahmen wirkt eingekerbt (3D-Effekt).</dd>
 <dt>
  ridge</dt>
 <dd>
  Der Rahmen wirkt wie eine Kante (3D-Effekt).</dd>
 <dt>
  inset</dt>
 <dd>
  Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).</dd>
 <dt>
  outset</dt>
 <dd>
  Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).</dd>
 <dt>
  inherit</dt>
 <dd>
  Der Wert des Elternelements wird geerbt.</dd>
</dl>
<h2 id="Beispiele">Beispiele</h2>
<pre>.beispielEins {
  border-left-style: dashed;      /* gestrichelt */
}

.beispielZwei {
  border-left-style: groove;      /* Einkerbung */
}

.beispielDrei {
 border-left-style: hidden;       /* Collapsing Border Model */
 border-collapse: collapse;
}
</pre>
<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
<table class="standard-table">
 <tbody>
  <tr>
   <th>Browser</th>
   <th>ab Version</th>
  </tr>
  <tr>
   <td>Internet Explorer</td>
   <td>4.0</td>
  </tr>
  <tr>
   <td>Firefox (Gecko)</td>
   <td>1.0 (1.0)</td>
  </tr>
  <tr>
   <td>Opera</td>
   <td>3.5</td>
  </tr>
  <tr>
   <td>Safari (WebKit)</td>
   <td>1.0 (85)</td>
  </tr>
 </tbody>
</table>
<h2 id="Spezifikation">Spezifikation</h2>
<ul>
 <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-left-style" lang="en">CSS 3 Background and Borders #border-left-style</a></li>
 <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left-style" lang="en">CSS 2.1 Box #border-left-style</a></li>
</ul>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
 <li><a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a>, <a href="/de/CSS/border-left-color" title="de/CSS/border-left-color"><code>border-left-color</code></a>, <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a></li>
 <li><a href="/de/CSS/border-style" title="de/CSS/border-style"><code>border-style</code></a>, <a href="/de/CSS/border-bottom-style" title="de/CSS/border-bottom-style"><code>border-bottom-style</code></a>, <a href="/de/CSS/border-right-style" title="de/CSS/border-right-style"><code>border-right-style</code></a>, <a href="/de/CSS/border-top-style" title="de/CSS/border-top-style"><code>border-top-style</code></a></li>
</ul>
<p>{{ languages( { "en": "en/CSS/border-left-style", "fr": "fr/CSS/border-left-style", "ja": "ja/CSS/border-left-style", "pl": "pl/CSS/border-left-style" } ) }}</p>