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

Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter.
VererbtNein
Medienvisuell
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:
Kanonische ReihenfolgeReihenfolge des Auftretens in der formalen Grammatik der Werte

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()> | <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>? )

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 3.5Safari Vollständige Unterstützung 1WebView Android ? Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android ? Safari iOS Vollständige Unterstützung 1Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, schlagi123, Sebastianz, fscholz, Yuichiro, Jürgen Jeka, Michael2402
Zuletzt aktualisiert von: SJW,