Change border color of GtkButton when focused

Question

I want to set the border color of a GtkButton when it has focus. I tried the following CSS, but it didn't work.

.toggle-button:focus {
  outline-width: 2px;
  border-color: #000000;
}

Do I need to set any other properties? How can I achieve this?

Answer 1

It's not easy to answer this question if you don't know the relevant part of the script. Here's what works for me.

/* applies to button1 */
.button1{
  border-radius: 50px;
  border: 2px solid green;
  color: red;
}
/* button1 mouse over it */
.button1:hover {
   background: grey;
}
/*button2 - basic setting*/
.button2 {
  color: maroon;
  border: 4px dotted red;
  background: grey;
}
/* button2 clicked */
.button2:active {
     background: red;
} 
/* button2 has fokus */
.button2:focus {
    color: white;
    border: 2px solid green;
}

/*button3 - basic setting */
.button3 {
    border: 10px dashed blue;
    color: black;
}

/*button4 -basic setting */
.button4 {
    border-radius: 200px;
}

If necessary, I can also provide my corresponding script.