The var function assigns a global variable to a property.
Global variables are defined with the :root psuedo-class.
A border defined by global variables with a var function.
<style>
:root {
--main-border-width: 5px;
--main-border-style: solid;
--main-border-color: lightblue;
}
.var {
height: 100px;
border: var(--main-border-width)
var(--main-border-style)
var(--main-border-color);
}
</style>
<div class="var"></div>
var(--name, fallback);
| Value | Description |
|---|---|
--name |
Required. Global variable name. The 2 prefixed dashes are required. |
fallback |
Optional. A fallback value for when the variable is not found. |
This table shows when var support started for each browser.
 Chrome
|
49.0 | Sep 2016 |
 Firefox
|
31.0 | Jun 2014 |
 IE/Edge
|
15.0 | Apr 2017 |
 Opera
|
36.0 | Mar 2016 |
 Safari
|
9.1 | Mar 2016 |
