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.

Initialwert	wie die jeweiligen Kurzschreibweisen: `border-width`: wie die jeweiligen Kurzschreibweisen: `border-top-width`: `medium` `border-right-width`: `medium` `border-bottom-width`: `medium` `border-left-width`: `medium` `border-style`: wie die jeweiligen Kurzschreibweisen: `border-top-style`: `none` `border-right-style`: `none` `border-bottom-style`: `none` `border-left-style`: `none` `border-color`: wie die jeweiligen Kurzschreibweisen: `border-top-color`: `currentcolor` `border-right-color`: `currentcolor` `border-bottom-color`: `currentcolor` `border-left-color`: `currentcolor`
Anwendbar auf	alle Elemente. Auch anwendbar auf ::first-letter (en-US).
Vererbt	Nein
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `border-width`: wie die jeweiligen Kurzschreibweisen: `border-bottom-width`: die absolute Länge; `0` falls `border-bottom-style` `none` oder `hidden` ist `border-left-width`: die absolute Länge; `0` falls `border-left-style` `none` oder `hidden` ist `border-right-width`: die absolute Länge; `0` falls `border-right-style` `none` oder `hidden` ist `border-top-width`: die absolute Länge; `0` falls `border-top-style` `none` oder `hidden` ist `border-style`: wie die jeweiligen Kurzschreibweisen: `border-bottom-style`: wie angegeben `border-left-style`: wie angegeben `border-right-style`: wie angegeben `border-top-style`: wie angegeben `border-color`: wie die jeweiligen Kurzschreibweisen: `border-bottom-color`: berechnete Farbe `border-left-color`: berechnete Farbe `border-right-color`: berechnete Farbe `border-top-color`: berechnete Farbe
Animationstyp	wie die jeweiligen Kurzschreibweisen: `border-color`: wie die jeweiligen Kurzschreibweisen: `border-bottom-color`: Farbe `border-left-color`: Farbe `border-right-color`: Farbe `border-top-color`: Farbe `border-style`: diskret `border-width`: wie die jeweiligen Kurzschreibweisen: `border-bottom-width`: Längenangabe `border-left-width`: Längenangabe `border-right-width`: Längenangabe `border-top-width`: Längenangabe

Syntax

border: 1px;
border: 2px dotted;
border: medium dashed green;

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.

Formale Syntax

<line-width> || <line-style> || <color>wobei 
<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
wobei 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
wobei 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

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
CSS Backgrounds and Borders Module Level 3 Die Definition von 'border' in dieser Spezifikation.	Anwärter Empfehlung	Technically removes the support for `transparent` as it is now a valid `<color>`; this has no practical influence. Though it cannot be set to another value using the shorthand, `border` does now reset `border-image` to its initial value (`none`).
CSS Level 2 (Revision 1) Die Definition von 'border' in dieser Spezifikation.	Empfehlung	Accepts the `inherit` keyword. Also accepts `transparent` as a valid color.
CSS Level 1 Die Definition von 'border' in dieser Spezifikation.	Empfehlung

Browser Kompatibilität

BCD tables only load in the browser