Issue with this.style.borderTop JS

I am trying to make a border randomly change colour when the mouse hovers over it as well as changing if the top or bottom border changes. If I run obj.style.borderTop = "3px Solid #dddddd" it works. Whereas when I try to concatenate the same same line but add in the randomly generated colours and border it doesn't work. This is the JS

<script type="text/javascript">
    "use strict";
    var tb = ["borderBottom", "borderTop"];
    var colour = ["#16a085", "#8e44ad", "#ee006b", "#27ae60", "#c0392b", "#e67e22", "#2980b9"]; 

    function randColours(obj) {
        var randTB = tb[Math.floor(Math.random() * tb.length)];
        var randColour = colour[Math.floor(Math.random() * colour.length)];
        var final = "obj.style.";
        var final = final.concat(randTB);
        var final = final.concat("= '3px Solid ");
        var final = final.concat(randColour);
        var final = final.concat("';");
        var execuatable = new Function(final);
        return(execuatable());
    }
    function rcrm(x){
        x.style.border = "3px solid #2c3e50";
    }
</script> 

This is the HTML that the mouse over is applied to <li onmouseover="randColours(this)" onmouseout="rcrm(this)"><a href="">PHOTOS</a></li>

I know the concatenation is very in efficient but it helps to break down the code. I have also tried replacing the obj. with document.getElementById('photo') and it works then, but it needs to be able to work with all the things I throw at it. Really not sure what to do to fix this issue. Cheers