border-top-style

  • Adressname der Version: CSS/border-top-style
  • Titel der Version: border-top-style
  • ID der Version: 89829
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Nein
  • Kommentar 375 words added, 176 words removed

Inhalt der Version

Übersicht

Die border-top-style Eigenschaft legt die Rahmenart des oberen Rahmens fest.

  • Standardwert: none
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • Werte: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

Syntax

border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit 

Werte

none
Standardwert. Es wird kein oberer Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.
hidden
Genau wie bei none wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.
Wenn border-collapse: collapse gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.
dotted
Punktierte Linie.
dashed
Gestrichelte Linie.
solid
Durchgehende Linie.
double
Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der border-top-width Angabe groß.
groove
Der Rahmen wirkt eingekerbt (3D-Effekt).
ridge
Der Rahmen wirkt wie eine Kante (3D-Effekt).
inset
Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).
outset
Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).
inherit
Der Wert des Elternelements wird geerbt.

Beispiele

.beispielEins {                      
  border-top-style: dashed;      /* gestrichelt */
}

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

.beispielDrei {
 border-top-style: hidden;       /* Collapsing Border Model */ 
 border-collapse: collapse;
}

Browser Kompatibilität

Browser ab Version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)

Spezifikation

Siehe auch

{{ languages( { "en": "en/CSS/border-top-style", "fr": "fr/CSS/border-top-style", "pl": "pl/CSS/border-top-style", "es": "es/CSS/border-top-style" } ) }}

Quelltext der Version

<h3>Übersicht</h3>
<p>Die <code>border-top-style</code> Eigenschaft legt die Rahmenart des oberen 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>Werte: <code>none</code> | <code>hidden</code> | <code>dotted</code> | <code>dashed</code> | <code>solid</code> | <code>double</code> | <code>groove</code> | <code>ridge</code> | <code>inset</code> | <code>outset</code> | <a href="/de/CSS/inherit"><code>inherit</code></a></li>
</ul>
<h3>Syntax</h3>
<pre class="eval">border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit 
</pre>
<h3>Werte</h3>
<dl> <dt>none</dt> <dd>Standardwert. Es wird kein oberer 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"><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-top-width"><code>border-top-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>
<h3>Beispiele</h3>
<pre>.beispielEins {                      
  border-top-style: dashed;      /* gestrichelt */
}

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

.beispielDrei {
 border-top-style: hidden;       /* Collapsing Border Model */ 
 border-collapse: collapse;
}
</pre>
<h3>Browser <span>Kompatibilität</span></h3>
<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>
<h3>Spezifikation</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-top-style" lang="en">CSS 3 Background and Borders #border-top-style</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-top-style" lang="en">CSS 2.1 Box #border-top-style</a></li>
</ul>
<h3>Siehe auch</h3>
<ul> <li><a href="/de/CSS/border-top"><code>border-top</code></a>, <a href="/de/CSS/border-top-color"><code>border-top-color</code></a>, <a href="/de/CSS/border-top-width"><code>border-top-width</code></a></li> <li><a href="/de/CSS/border-style"><code>border-style</code></a>, <a href="/de/CSS/border-bottom-style"><code>border-bottom-style</code></a>, <a href="/de/CSS/border-left-style"><code>border-left-style</code></a>, <a href="/de/CSS/border-right-style"><code>border-right-style</code></a></li>
</ul>
<p>{{ languages( { "en": "en/CSS/border-top-style", "fr": "fr/CSS/border-top-style", "pl": "pl/CSS/border-top-style", "es": "es/CSS/border-top-style" } ) }}</p>
Zu dieser Version zurücksetzen