CSS var() Function

The var function assigns a global variable to a property.

Global variables are defined with the :root psuedo-class.

Example

#

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>

Syntax

var(--name, fallback);

Values

#

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.

Browser support

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

You may also like

Guides