--- title: border-right-style slug: Web/CSS/border-right-style tags: - CSS - CSS Referenz translation_of: Web/CSS/border-right-style --- <p>{{ CSSRef() }}</p> <h2 id="Übersicht">Übersicht</h2> <p>Die <code>border-right-style</code> Eigenschaft legt die Rahmenart des rechten 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-right-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 rechter 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-right-width" title="De/CSS/Border-right-width"><code>border-right-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-right-style: dashed; /* gestrichelt */ } .beispielZwei { border-right-style: groove; /* Einkerbung */ } .beispielDrei { border-right-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-right-style" lang="en">CSS 3 Background and Borders #border-right-style</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-right-style" lang="en">CSS 2.1 Box #border-right-style</a></li> </ul> <h2 id="Siehe_auch">Siehe auch</h2> <ul> <li><a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a>, <a href="/de/CSS/border-right-color" title="de/CSS/border-right-color"><code>border-right-color</code></a>, <a href="/De/CSS/Border-right-width" title="De/CSS/Border-right-width"><code>border-right-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-left-style" title="de/CSS/border-left-style"><code>border-left-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-right-style", "fr": "fr/CSS/border-right-style", "ja": "ja/CSS/border-right-style", "pl": "pl/CSS/border-right-style" } ) }}</p>