JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myDiv">hello</div>
<div id="myDiv2" style="border:5px dashed orange; position: absolute; bottom: 160px;">bye</div>

CSS

#myDiv {
   position: absolute;
   bottom: 200px;
   border: 5px dashed orange;
   background-color: cyan;
}

JavaScript

var myDiv = document.getElementById("myDiv"),
    computedStyle = window.getComputedStyle(myDiv);

//var borderColor = computedStyle.getPropertyValue("border-color"); /* not working */
var borderColor = computedStyle.getPropertyValue("border-left-color"); /* need to specify wich border you want to get */

alert(borderColor);
//alert(myDiv.style.getPropertyValue("border-left-color")); /* no element style property defined with this name, computed style only */
//alert(document.getElementById("myDiv2").style.getPropertyValue("border-left-color")); /* here in myDiv2, element style property is avaible because it was defined inline and not via CSS file */

//computedStyle.setProperty("border-color", "yellowgreen", null); /* not working */
myDiv.style.setProperty("border-color", "yellowgreen", null); /* need to set property via element style instead of computed style */
//myDiv.style.borderColor = "blue"; /* working but old way to do */

alert(myDiv.style.getPropertyValue("border-left-color"));
//alert(borderColor); /* working but displays old computed style */
alert(window.getComputedStyle(myDiv).getPropertyValue("border-left-color")); /* working, new computed style */