How to pass multiple arguments in CSS?

December 17, 2021

I have a class in CSS here:

.border {
  border-color: var(--colorArg);
  border-style: var(--styleArg);
}

And I want to pass multiple arguments in the CSS class through HTML, like so:

<div class="border" style="--colorArg: blue --styleArg: outset;">
  <p>This is a website made as a practice website to learn HTML, CSS, and 
  JavaScript!</p>
</div>

Passing only --styleArg: outset works, it creates the border in the desired manner. But if I try to pass more than one, or just the color argument, there is no border created at all. Maybe because I need to make the argument the Hex code, or the RGB code?

>Solution :

You have a syntax error in the style attribute. There needs to be a semi colon (;) between each property setting.

.border {
  border-color: var(--colorArg);
  border-style: var(--styleArg);
}

<div class="border" style="--colorArg: blue; --styleArg: outset;">
  <p>This is a website made as a practice website to learn HTML, CSS, and JavaScript!
  </p>
</div>