Showing Only Bottom Border of Button On Click

Hello!

I have been trying to get only the bottom border to show on a button when it’s been clicked.

Here is my current coding:
$w . onReady ( function () {
let buttonsToChange = [ $w ( “#button1” )]; //put the relevant buttons here
buttonsToChange . forEach ( button => {
button.style.color = “rgba(0,0,0,1)” ;
button . onClick (( event ) => {
buttonsToChange . forEach ( b => {
b.style.color = “rgba(255,0,0,1)” ;
button.style.borderWidth = “3px” ;
button.style.borderColor = “rgba(255,0,0,1)” ;
});
button.style.backgroundColor = “rgba(255,255,255,1)” ;
})
})
})

This currently gives me a full, red border on all four sides. I tried adding "button.style.borderTopWidth = “0px”; along with borderLeftWidth, borderRightWidth, setting all to 0px, but that didn’t work. Is there any way of doing this?

TIA!

Did you find any sollution to your problem ?