border

Springen zu:

Übersicht
Syntax
Beispiele
Spezifikation
Browser Kompatibilität
Siehe auch

Ü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`.
Vererbt	Nein
Medien	visuell
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
Kanonische Reihenfolge	Reihenfolge 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

<br-width> || <br-style> || <color>wobei 
<br-width> = <length> | thin | medium | thick
<br-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} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <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

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	1.0 (1.7 oder früher)	4.0	3.5	1.0 (85)

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	1.0 (1.9.2)	?	?	1.0

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter:

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

Zuletzt aktualisiert von: schlagi123, 02.02.2018, 03:35:02

Verwandte Themen