use-theme-editor

Version:

Zero configuration CSS variables based theme editor

90 lines (87 loc) • 285 kB

HTML

<!DOCTYPE html>  <html lang="en-US" prefix="og: https://ogp.me/ns#" class="light" style=""><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.cbbd161b.png"><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.6803c6f0.png"><meta name="theme-color" content="#ffffff"><link rel="manifest" href="https://developer.mozilla.org/manifest.56b1cedc.json"><link rel="search" type="application/opensearchdescription+xml" href="https://developer.mozilla.org/opensearch.xml" title="MDN Web Docs"><title>Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN</title><link rel="alternate" title="Uso de propiedades personalizadas (variables) en CSS" href="https://developer.mozilla.org/es/docs/Web/CSS/Using_CSS_custom_properties" hreflang="es"><link rel="alternate" title="Les variables CSS" href="https://developer.mozilla.org/fr/docs/Web/CSS/Using_CSS_custom_properties" hreflang="fr"><link rel="alternate" title="CSS カスタムプロパティ (変数) の使用" href="https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties" hreflang="ja"><link rel="alternate" title="사용자 지정 CSS 속성 사용하기 (변수)" href="https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties" hreflang="ko"><link rel="alternate" title="Utilizando propriedades CSS personalizadas (variáveis)" href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/Using_CSS_custom_properties" hreflang="pt"><link rel="alternate" title="Использование переменных в CSS" href="https://developer.mozilla.org/ru/docs/Web/CSS/Using_CSS_custom_properties" hreflang="ru"><link rel="alternate" title="使用 CSS 自定义属性（变量）" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties" hreflang="zh"><link rel="alternate" title="Using CSS custom properties (variables)" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" hreflang="en"><meta name="robots" content="index, follow"><meta name="description" content="Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);)."><meta property="og:url" content="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties"><meta property="og:title" content="Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN"><meta property="og:locale" content="en-US"><meta property="og:description" content="Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);)."><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.cd6c4a5a.png"><meta property="twitter:card" content="summary_large_image"><link rel="canonical" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties"><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.mdn-cta-container,.on-github,.page-footer,.sidebar,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><link href="./use-custom-properties_files/main.a8e38338.css" rel="stylesheet"><meta id="ConnectiveDocSignExtentionInstalled" name="ConnectiveDocSignExtentionInstalled" data-extension-version="1.0.6"></head><body><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#content">Skip to main content</a></li><li><a id="skip-search" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#languages-switcher-button">Skip to select language</a></li></ul><div class="mdn-cta-container"><div id="mdn-cta-content" class="mdn-cta-content"><div id="plus_launch_announcement" class="mdn-cta-content-container"><p class="mdn-cta-copy"><a href="https://developer.mozilla.org/en-US/plus" class="mdn-plus">MDN Plus</a> now available in <span class="underlined">your</span> country! Support MDN <span class="underlined">and</span> make it your own. <a href="https://hacks.mozilla.org/2022/04/mdn-plus-now-available-in-more-markets" target="_blank" rel="noopener noreferrer">Learn more</a> ✨</p></div></div><div class="mdn-cta-controls"><button type="button" id="mdn-cta-close" class="mdn-cta-close" aria-label="Close banner"><svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img"><g fill="currentColor" transform="rotate(-45 50 50)"><rect height="121.7" rx="6.76" width="13.52" x="43.24" y="-10.85"></rect><rect height="13.52" rx="6.76" width="121.7" x="-10.85" y="43.24"></rect></g></svg></button></div></div><div class="page-wrapper category-css document-page"><div class="main-document-header-container"><header class="main-document-header-container top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="https://developer.mozilla.org/en-US/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><style>.logo-m{fill:var(--text-link)}</style><g class="logo-m"><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zM50.7 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zM101.4 0v92.1H91V0h10.4z"></path></g><path class="logo-m" d="M627.9 95.6h67v8.8h-67v-8.8z"></path><g style="fill:var(--text-primary)"><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zM401.9 62c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zM445 53.7c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zM506.5 72.8h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zM546.3 54.6c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zM583.6 60.2c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zM618.3 62.1c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z"></path></g></svg></a><button aria-expanded="false" aria-haspopup="menu" aria-label="Open main menu" title="Open main menu" type="button" class="button action has-icon main-menu-toggle"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu"><li class="top-level-entry-container"><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a class="top-level-entry" href="https://developer.mozilla.org/en-US/docs/Web">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="https://developer.mozilla.org/en-US/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="https://developer.mozilla.org/en-US/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="https://developer.mozilla.org/en-US/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="https://developer.mozilla.org/en-US/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class="apis-link-container desktop-only "><a href="https://developer.mozilla.org/en-US/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container"><button type="button" id="guides-button" class="top-level-entry menu-toggle" aria-controls="guides-menu" aria-expanded="false">Guides</button><a class="top-level-entry" href="https://developer.mozilla.org/en-US/docs/Learn">Guides</a><ul id="guides-menu" class="submenu guides hidden inline-submenu-lg" aria-labelledby="guides-button"><li class="apis-link-container mobile-only "><a href="https://developer.mozilla.org/en-US/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="https://developer.mozilla.org/en-US/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container"><span class="visually-hidden top-level-entry-dot"></span><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">MDN Plus</button><a class="top-level-entry" href="https://developer.mozilla.org/en-US/plus">MDN Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="https://developer.mozilla.org/en-US/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="https://developer.mozilla.org/en-US/plus/updates" class="submenu-item "><div class="submenu-icon"></div><span class="visually-hidden submenu-item-dot">New feature</span><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="https://developer.mozilla.org/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="https://developer.mozilla.org/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="https://developer.mozilla.org/en-US/search" role="search" aria-haspopup="listbox" aria-owns="top-nav-search-menu" aria-expanded="false" class="search-form search-widget" id="top-nav-search-form"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input id="top-nav-search-input" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-labelledby="top-nav-search-label" autocomplete="off" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button aria-haspopup="menu" type="button" class="button action has-icon theme-switcher-menu small"><span class="button-wrap"><span class="icon icon-theme-light "></span>Theme</span></button></div><ul class="auth-container"><li><a href="https://developer.mozilla.org/users/fxa/login/authenticate/?next=%2Fen-US%2Fdocs%2FWeb%2FCSS%2FUsing_CSS_custom_properties" class="signin-link" rel="nofollow">Already a subscriber?</a></li><li><a class="button primary mdn-plus-subscribe-link" href="https://developer.mozilla.org/en-US/plus"><span class="button-wrap">Get MDN Plus</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a class="breadcrumb" property="item" typeof="WebPage" href="https://developer.mozilla.org/en-US/docs/Web"><span property="name">References</span></a><meta property="position" content="1"></li><li property="itemListElement" typeof="ListItem"><a class="breadcrumb" property="item" typeof="WebPage" href="https://developer.mozilla.org/en-US/docs/Web/CSS"><span property="name">CSS</span></a><meta property="position" content="2"></li><li property="itemListElement" typeof="ListItem"><a class="breadcrumb-current-page" property="item" typeof="WebPage" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties"><span property="name">Using CSS custom properties (variables)</span></a><meta property="position" content="3"></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button aria-haspopup="menu" id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu"><span class="button-wrap"><span class="icon icon-language "></span>English (US)</span></button></div></li></ul></div></div></div></div><div class="main-wrapper"><aside id="sidebar-quicklinks" class="sidebar"><button type="button" class="button action backdrop"><span class="button-wrap"></span></button><nav class="sidebar-inner"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In this article</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#basic_usage">Basic usage</a></li><li class="document-toc-item "><a class="document-toc-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#first_steps_with_custom_properties">First steps with custom properties</a></li><li class="document-toc-item "><a class="document-toc-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#using_the_root_pseudo-class">Using the :root pseudo-class</a></li><li class="document-toc-item "><a class="document-toc-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#inheritance_of_custom_properties">Inheritance of custom properties</a></li><li class="document-toc-item "><a class="document-toc-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values">Custom property fallback values</a></li><li class="document-toc-item "><a class="document-toc-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#handling_invalid_custom_properties" aria-current="true">Handling invalid custom properties</a></li><li class="document-toc-item "><a class="document-toc-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#values_in_javascript">Values in JavaScript</a></li><li class="document-toc-item "><a class="document-toc-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#see_also">See also</a></li></ul></section></div></div><h4 class="sidebar-heading">Related Topics</h4><div> <ol> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS"><strong>Tutorials</strong></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li> <li class="toggle"> <details> <summary>CSS first steps</summary> <ol> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps">CSS first steps overview</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS">What is CSS?</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Getting_started">Getting started with CSS</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">How CSS is structured</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_works">How CSS works</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Styling_a_biography_page">Assessment: Styling a biography page</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>CSS building blocks</summary> <ol> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks">CSS building blocks overview</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS values and units</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension">Assessment: Fundamental CSS comprehension</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper">Assessment: Creating fancy letterheaded paper</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/A_cool_looking_box">Assessment: A cool-looking box</a></li> </ol></details> </li> <li class="toggle"> <details> <summary>Styling text</summary> <ol> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text">Styling text overview</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Assessment: Typesetting a community school homepage</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>CSS layout</summary> <ol> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout">CSS layout overview</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Assessment: Fundamental layout comprehension</a></li> </ol> </details> </li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference"><strong>Reference</strong></a></li> <li class="toggle"><details><summary>Modules</summary><ol><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Compositing_and_Blending">Compositing and Blending</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders">CSS Backgrounds and Borders</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface">CSS Basic User Interface</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment">CSS Box Alignment</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model">CSS Box Model</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Charsets">CSS Charsets</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors">CSS Colors</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns">CSS Multi-column Layout</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Conditional_Rules">CSS Conditional Rules</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment">CSS Containment</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Counter_Styles">CSS Counter Styles</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Display">CSS Display</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts">CSS Fonts</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Fragmentation</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Generated_Content">CSS Generated Content</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images">CSS Images</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters">CSS Lists</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties">CSS Logical Properties and Values</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Masking">CSS Masking</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Miscellaneous">CSS Miscellaneous</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Motion_Path">CSS Motion Path</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Namespaces">CSS Namespaces</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Overflow">CSS Overflow</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Pages">CSS Paged Media</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning">CSS Positioned Layout</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Ruby">CSS Ruby Layout</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap">CSS Scroll Snap</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap_Points">CSS Scroll Snap Points</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars">CSS Scrollbars</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes">CSS Shapes</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Table">CSS Table</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text">CSS Text</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text_Decoration">CSS Text Decoration</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms">CSS Transforms</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Variables">CSS Custom Properties for Cascading Variables</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes">CSS Writing Modes</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View">CSSOM View</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Filter_Effects">Filter Effects</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries">Media queries</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media">Paged media</a></li></ol></details></li> <li class="toggle"><details><summary>Properties</summary><ol><li class="toggle"><details><summary>-webkit-*</summary><ol><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp">-webkit-line-clamp</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color">-webkit-text-fill-color</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke">-webkit-text-stroke</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke-color">-webkit-text-stroke-color</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke-width">-webkit-text-stroke-width</a></li></ol></details></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color">accent-color</a></li><li class="toggle"><details><summary>align-*</summary><ol><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-content">align-content</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items">align-items</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self">align-self</a></li><li><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-tracks">align-tracks</a></li></ol></details></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/all">all</a></li><li class="toggle"><details><summary>animation-*</summary><ol><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation">animation</a></li><li><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-composition">animation-composition</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay">animation-delay</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction">animation-direction</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration">animation-duration</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode">animation-fill-mode</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count">animation-iteration-count</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name">animation-name</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state">animation-play-state</a></li><li><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline">animation-timeline</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function">animation-timing-function</a></li></ol></details></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/appearance">appearance</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio">aspect-ratio</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter">backdrop-filter</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility">backface-visibility</a></li><li class="toggle"><details><summary>background-*</summary><ol><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">background</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment">background-attachment</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode">background-blend-mode</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip">background-clip</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">background-color</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-image">background-image</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin">background-origin</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-position">background-position</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x">background-position-x</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-y">background-position-y</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat">background-repeat</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-size">background-size</a></li></ol></details></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/block-size">block-size</a></li><li class="toggle"><details><summary>border-*</summary><ol><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">border</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block">border-block</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-color">border-block-color</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end">border-block-end</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-color">border-block-end-color</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-style">border-block-end-style</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-width">border-block-end-width</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start">border-block-start</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-color">border-block-start-color</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-style">border-block-start-style</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-width">border-block-start-width</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-style">border-block-style</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-width">border-block-width</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">border-bottom</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color">border-bottom-color</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius">border-bottom-left-radius</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius">border-bottom-right-radius</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style">border-bottom-style</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width">border-bottom-width</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse">border-collapse</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-color">border-color</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius">border-end-end-radius</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius">border-end-start-radius</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image">border-image</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-outset">border-image-outset</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-repeat">border-image-repeat</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice">border-image-slice</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-source">border-image-source</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-width">border-image-width</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline">border-inline</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-color">border-inline-color</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end">border-inline-end</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color">border-inline-end-color</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-style">border-inline-end-style</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width">border-inline-end-width</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start">border-inline-start</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color">border-inline-start-color</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style">border-inline-start-style</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width">border-inline-start-width</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-style">border-inline-style</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-width">border-inline-width</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">border-left</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color">border-left-color</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style">border-left-style</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width">border-left-width</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">border-radius</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">border-right</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color">border-right-color</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style">border-right-style</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width">border-right-width</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing">border-spacing</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius">border-start-end-radius</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius">border-start-start-radius</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-style">border-style</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">border-top</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color">border-top-color</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius">border-top-left-radius</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius">border-top-right-radius</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style">border-top-style</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width">border-top-width</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-width">border-width</a></li></ol></details></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/bottom">bottom</a></li><li class="toggle"><details><summary>box-*</summary><ol><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break">box-decoration-break</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">box-shadow</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing">box-sizing</a></li></ol></details></li><li class="toggle"><details><summary>break-*</summary><ol><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/break-after">break-after</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/break-before">break-before</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside">break-inside</a></li></ol></details></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side">caption-side</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color">caret-color</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clear">clear</a></li><li><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clip">clip</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path">clip-path</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color">color</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme">color-scheme</a></li><li class="toggle"><details><summary>column-*</summary><ol><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-count">column-count</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill">column-fill</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap">column-gap</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule">column-rule</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-color">column-rule-color</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-style">column-rule-style</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width">column-rule-width</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-span">column-span</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-width">column-width</a></li></ol></details></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/columns">columns</a></li><li class="toggle"><details><summary>contain-*</summary><ol><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/contain">contain</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-block-size">contain-intrinsic-block-size</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-height">contain-intrinsic-height</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-inline-size">contain-intrinsic-inline-size</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-size">contain-intrinsic-size</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-width">contain-intrinsic-width</a></li></ol></details></li><li class="toggle"><details><summary>container-*</summary><ol><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/c