基本的には以下の通りのようです

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    :root{
        --border-top-style    : 2px dashed #00F;
        --border-bottom-color : #0F0;
    }
    div.in_style_tag {
        border-top: var(--border-top-style);
        border-bottom: 2px solid var(--border-bottom-color);
    }
  </style>
  <script>
  let get_css_custom_property =()=>{
      let css_custom_prop_val =
      getComputedStyle(document.documentElement).getPropertyValue('--border-top-style');
      alert(css_custom_prop_val);
  }
  let set_css_custom_property =()=>{
      document.documentElement.style.setProperty('--border-top-style',
                                                 '1px solid #F00');
  }
  </script>
</head>

<body>

  <h1>CSS3 カスタムプロパティの練習</h1>
  
  <h2>&lt;style&gt;内に記載する場合</h2>
  
  <div class="in_style_tag">
    カスタムプロパティ
  </div>

  <h2>htmlタグの style属性内に記載する場合</h2>
  
  <div style="border-top: var(--border-top-style);">
    カスタムプロパティ
  </div>

  <h2>javascriptによる参照と指定</h2>

  <div>
  <button onClick="get_css_custom_property()">参照</button>
  <button onClick="set_css_custom_property()">設定</button>
  </div>

  <h2>参考url</h2>

  <ul>
    <li>
      <a href="https://coliss.com/articles/build-websites/operation/css/css-variables.html">
        https://coliss.com/articles/build-websites/operation/css/css-variables.html</a>
    </li>
    <li>
      <a href="https://www.webcreatorbox.com/tech/css-variables">
        https://www.webcreatorbox.com/tech/css-variables</a>
    </li>
  </ul>
</body>
</html>

end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ

css3 custom propertyの基本と、javascriptによる参照&設定

参考url