border

Ü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.

• Standardwert the concatenation of the initial values of its longhand properties:
  • border-width: the concatenation of the initial values of its longhand properties:
    • border-top-width: medium
    • border-right-width: medium
    • border-bottom-width: medium
    • border-left-width: medium
  • border-style: the concatenation of the initial values of its longhand properties:
    • border-top-style: none
    • border-right-style: none
    • border-bottom-style: none
    • border-left-style: none
  • border-color: the concatenation of the initial values of its longhand properties:
    • border-top-color: currentColor
    • border-right-color: currentColor
    • border-bottom-color: currentColor
    • border-left-color: currentColor
• Anwendbar auf Alle Elemente
• Vererbt Nein
• Prozentwerte —
• Medium visuell
• Berechneter Wert wie die einzelnen Werte der Kurzschreibweise:
  • border-width: wie die einzelnen Werte der Kurzschreibweise:
    • border-bottom-width: is itself a shorthand, applies to the same elements as each of its longhand properties.
    • border-left-width: is itself a shorthand, applies to the same elements as each of its longhand properties.
    • border-right-width: is itself a shorthand, applies to the same elements as each of its longhand properties.
    • border-top-width: is itself a shorthand, applies to the same elements as each of its longhand properties.
  • border-style: wie die einzelnen Werte der Kurzschreibweise:
    • border-bottom-style: is itself a shorthand, applies to the same elements as each of its longhand properties.
    • border-left-style: is itself a shorthand, applies to the same elements as each of its longhand properties.
    • border-right-style: is itself a shorthand, applies to the same elements as each of its longhand properties.
    • border-top-style: is itself a shorthand, applies to the same elements as each of its longhand properties.
  • border-color: wie die einzelnen Werte der Kurzschreibweise:
    • border-bottom-color: is itself a shorthand, applies to the same elements as each of its longhand properties.
    • border-left-color: is itself a shorthand, applies to the same elements as each of its longhand properties.
    • border-right-color: is itself a shorthand, applies to the same elements as each of its longhand properties.
    • border-top-color: is itself a shorthand, applies to the same elements as each of its longhand properties.
• Animierbar wie die jeweiligen Kurzschreibweisen:
  • border-color: wie die jeweiligen Kurzschreibweisen:
    • border-bottom-color: Ja, als Farbe
    • border-left-color: Ja, als Farbe
    • border-right-color: Ja, als Farbe
    • border-top-color: Ja, als Farbe
  • border-style: Nein
  • border-width: wie die jeweiligen Kurzschreibweisen:
    • border-bottom-width: Ja, als Längenangabe
    • border-left-width: Ja, als Längenangabe
    • border-right-width: Ja, als Längenangabe
    • border-top-width: Ja, als Längenangabe
• Canonical order order of appearance in the formal grammar of the values

Syntax

border: <br-width> || <br-style> || <color>

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

Browser Kompatibilität

Siehe auch

• border-color, border-style, border-width
• border-bottom, border-top, border-left, border-right
• -moz-border-bottom-colors, -moz-border-top-colors, -moz-border-left-colors, -moz-border-right-colors,
• -moz-border-image, -moz-border-radius