Given the code below,

const handleClick=()=>{
console.log(window.getComputedStyle(document.getElementById("transparent")).borderColor);
  console.log(window.getComputedStyle(document.getElementById("red")).borderColor);
}

<div id='transparent' style='border: 2px solid transparent'/>
<div id='red' style='border: 2px solid red'/>
 


<button className="App" onclick="handleClick()">
  something
</button>

it output rgba(0, 0, 0, 0) for transparent color rgb(255, 0, 0) for red color.

Will it always output in such a format for transparent and red color (e.g, not #ff0000 or red)? The reason is that I am going to do a conditional check for transparent color in my code using the following:

if (window.getComputedStyle(document.getElementById("red")).borderColor == 'rgba(0, 0, 0, 0)'){
   //do something...
}

Will it be a good practice or there are better way to do that?