Quiero poder agregar un borde con javascript. Entonces pensé que podría hacerlo agregándolo como una clase separada. Pero no funciona .
#button1 { box-shadow:inset 0px 0px 0px 0px #3dc21b; background-color:#44c767; border-radius: 50%; border:1px solid #18ab29; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:17px; padding:180px 180px; text-decoration:none; text-shadow:0px 1px 0px #2f6627; margin:200px; border: 30px solid black ; } .AddedbuttonBorder { border: 30px solid black ; }Está utilizando una ID y una clase como selectores de CSS. El selector de ID tiene una especificación de CSS más alta que el selector de clase, por lo que la configuración del border en el selector de ID tendrá prioridad sobre la del selector de clase, independientemente de su orden.
Para "anular" la configuración del selector de ID, puede agregar !important a la configuración en la regla que usa el selector de clase ( border: 30px solid black !important; ), o usar un selector que combine ID y clase, como este:
#button1.AddedbuttonBorder { border: 30px solid black; }si quieres hacer esto con javascript puedes usar
document.getElementById('button1').classList.add('AddedbuttonBorder');