border

  • Adressname der Version: Web/CSS/border
  • Titel der Version: border
  • ID der Version: 503411
  • Erstellt:
  • Autor: SJW
  • Aktuelle Version? Ja
  • Kommentar

Inhalt der Version

{{ CSSRef("CSS Borders") }}

Übersicht

Die border Eigenschaft legt den kompletten Rahmen eines Elementes fest und ist eine Kurzform für
border-color, border-style und border-width. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.
Unterschiedliche Einstellungen für den oberen, unteren, linken und rechten Rahmen können nur unter den Kurzformen
border-bottom, border-top, border-left und border-right festgelegt werden.

{{cssbox("border")}}

Syntax

border: {{csssyntax("border")}}

Werte

<Rahmenbreite>
Optional. Wenn nichts festgelegt ist, wird medium verwendet. Siehe: border-width.
<Rahmenstil>
Erforderlich. Wenn nichts festgelegt ist, wird none verwendet. Siehe: border-style.
<Rahmenfarbe>
Optional. Wenn nichts festgelegt ist, wird der Wert der color Eigenschaft des Elements genommen. Siehe: border-color.
inherit
Der Wert des Elternelements wird geerbt.

Beispiele

Live Beispiel

  border: dashed;           /* gestrichelter Rahmen mit mittlerer Breite und gleicher Farbe wie der Text */
  border: dotted 1.5em;     /* gestrichelt, 1.5em breit, gleiche Farbe wie der Text */
  border: solid red;        /* durchgezogener, roter Rahmen mit mittelgroßer Breite */
  border: solid blue 10px;  /* durchgezogene Linie, blaue Farbe, 10px Breite */

Spezifikation

Spezifikation Status Argument
{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}} {{Spec2('CSS3 Backgrounds')}} Technically removes the support for transparent as it is now a valid {{xref_csscolorvalue()}}; this has no practical influence.
Though it cannot be set to another value using the shorthand, border does now reset {{cssxref("border-image")}} to its initial value (none).
{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}} {{Spec2('CSS2.1')}} Accepts the inherit keyword. Also accepts transparent as a valid color.
{{SpecName('CSS1', '#border', 'border')}} {{Spec2('CSS1')}}  

Browser Kompatibilität

{{CompatibilityTable()}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{CompatGeckoDesktop("1.0")}} 4.0 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatUnknown()}} {{CompatGeckoMobile("1.9.2")}} {{CompatUnknown()}} {{CompatUnknown()}} 1.0

Siehe auch

Quelltext der Version

<p>{{ CSSRef("CSS Borders") }}</p>
<h2 id=".C3.9Cbersicht.3A">Übersicht</h2>
<p>Die <code>border</code> Eigenschaft legt den kompletten Rahmen eines Elementes fest und ist eine Kurzform für<br />
 <a href="/de/CSS/border-color" title="de/CSS/border-color"><code>border-color</code></a>, <a href="/de/CSS/border-style" title="de/CSS/border-style"><code>border-style</code></a> und <a href="/de/CSS/border-width" title="de/CSS/border-width"><code>border-width</code></a>. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.<br />
 Unterschiedliche Einstellungen für den oberen, unteren, linken und rechten Rahmen können nur unter den Kurzformen<br />
 <a href="/de/CSS/border-bottom" title="de/CSS/border-bottom"><code>border-bottom</code></a>, <a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a>, <a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a> und <a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a> festgelegt werden.</p>
<p>{{cssbox("border")}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="eval">
border: <code>{{csssyntax("border")}}</code>
</pre>
<h3 id="Werte">Werte</h3>
<dl>
 <dt>
  &lt;Rahmenbreite&gt;</dt>
 <dd>
  Optional. Wenn nichts festgelegt ist, wird <code>medium</code> verwendet. Siehe: <a href="/de/CSS/border-width" title="de/CSS/border-width"><code>border-width</code></a>.</dd>
 <dt>
  &lt;Rahmenstil&gt;</dt>
 <dd>
  Erforderlich. Wenn nichts festgelegt ist, wird <code>none</code> verwendet. Siehe: <a href="/de/CSS/border-style" title="de/CSS/border-style"><code>border-style</code></a>.</dd>
 <dt>
  &lt;Rahmenfarbe&gt;</dt>
 <dd>
  Optional. Wenn nichts festgelegt ist, wird der Wert der <code>color</code> Eigenschaft des Elements genommen. Siehe: <a href="/de/CSS/border-color" title="de/CSS/border-color"><code>border-color</code></a>.</dd>
 <dt>
  inherit</dt>
 <dd>
  Der Wert des Elternelements wird geerbt.</dd>
</dl>
<h2 id="Beispiele">Beispiele</h2>
<p><a class="external" href="/samples/cssref/border.html" rel="external nofollow" target="_blank">Live Beispiel</a></p>
<pre>
  border: dashed;           /* gestrichelter Rahmen mit mittlerer Breite und gleicher Farbe wie der Text */
  border: dotted 1.5em;     /* gestrichelt, 1.5em breit, gleiche Farbe wie der Text */
  border: solid red;        /* durchgezogener, roter Rahmen mit mittelgroßer Breite */
  border: solid blue 10px;  /* durchgezogene Linie, blaue Farbe, 10px Breite */
</pre>
<h2 id="Specifications" name="Specifications">Spezifikation</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Argument</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>Technically removes the support for <code>transparent</code> as it is now a valid {{xref_csscolorvalue()}}; this has no practical influence.<br />
    Though it cannot be set to another value using the shorthand, <code>border</code> does now reset {{cssxref("border-image")}} to its initial value (<code>none</code>).</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Accepts the <code>inherit</code> keyword. Also accepts <code>transparent</code> as a valid color.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#border', 'border')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility">Browser Kompatibilität</h2>
<p>{{CompatibilityTable()}}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>1.0</td>
    <td>{{CompatGeckoDesktop("1.0")}}</td>
    <td>4.0</td>
    <td>3.5</td>
    <td>1.0 (85)</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatUnknown()}}</td>
    <td>{{CompatGeckoMobile("1.9.2")}}</td>
    <td>{{CompatUnknown()}}</td>
    <td>{{CompatUnknown()}}</td>
    <td>1.0</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
 <li><a href="/de/CSS/border-color" title="de/CSS/border-color"><code>border-color</code></a>, <a href="/de/CSS/border-style" title="de/CSS/border-style"><code>border-style</code></a>, <a href="/de/CSS/border-width" title="de/CSS/border-width"><code>border-width</code></a></li>
 <li><a href="/de/CSS/border-bottom" title="de/CSS/border-bottom"><code>border-bottom</code></a>, <a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a>, <a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a>, <a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a></li>
 <li><a href="/de/CSS/-moz-border-bottom-colors" title="de/CSS/-moz-border-bottom-colors"><code>-moz-border-bottom-colors</code></a>, <a href="/de/CSS/-moz-border-top-colors" title="de/CSS/-moz-border-top-colors"><code>-moz-border-top-colors</code></a>, <a href="/de/CSS/-moz-border-left-colors" title="de/CSS/-moz-border-left-colors"><code>-moz-border-left-colors</code></a>, <a href="/de/CSS/-moz-border-right-colors" title="de/CSS/-moz-border-right-colors"><code>-moz-border-right-colors</code></a>,</li>
 <li><a href="/de/CSS/-moz-border-image" title="de/CSS/-moz-border-image"><code>-moz-border-image</code></a>, <a href="/de/CSS/border-radius" title="de/CSS/-moz-border-radius"><code>-moz-border-radius</code></a></li>
</ul>
Zu dieser Version zurücksetzen