How do I gray elements based on class name?

I'm trying to grey the border elements smoothly with css smoothing and it does nothing and the elements are 1 pixel thick

code:

        function greyBorder()
        {
            var elms
            elms = Array.from(document.getQuerySelectorAll(".border"))
            for (var i = 0; elms[i]; i++)
            {
                elms[i].style.backgroundColor = "#aaaaaa"
            }
            
        }

        function ungreyBorder()
        {
            var elms
            elms = Array.from(document.getQuerySelectorAll(".border"))
            for (var i = elms.length - 1; i >= 0; i--)
            {
                elms[i].style.backgroundColor = "#2832be"
            }
        }

I tried everything i knew to do

You can try like this.

1. Use document.getQuerySelectorAll instead of document.getQuerySelectorAll. (reference : https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
2. for (var i = 0; elms[i]; i++) -> for (var i = 0; i < elms.length; i++)

or you can use forEach for iteration, like this.

        function greyBorder()
        {
            const elems = [...document.querySelectorAll(".border")];
            elems.forEach((elem) => {
                elem.style.backgroundColor = "#aaaaaa"
            })
            
        }