How to get rid of `border-bottom` style in GNOME panel's button

Question

I want to make new gnome-shell theme which now the theming is lack of documentation yet.

Please look on the image below,

I want to get rid of the border-bottom (likely). And I tried in several ways and just change other element, not the one I mean.

Here, I try to manipulate element with .panel-button class,

.panel-button {
       border: 1px solid #ff0;
}

.panel-button:active,
.panel-button:checked,
.panel-button:focus,
.panel-button:hover,
.panel-button:overview {
       border: 1px solid #ff0;
}

But nope, it produce unexpected result.

Answer 1

It's a strange way, but I myself found by looking inside gnome-shell-viva-theme source. We can use gradient with the same color,

.panel-button:active,
.panel-button:checked,
.panel-button:focus,
.panel-button:hover,
.panel-button:overview {
    background-gradient-direction: vertical;
    background-gradient-start: $bg-color;
    background-gradient-end: $bg-color;
}

It is not a perfect answer, still looking the better one.

Answer 2

The property must to be changed is a box-shadow property.

#panel .panel-button:active,
#panel .panel-button:overview,
#panel .panel-button:focus,
#panel .panel-button:checked {
  box-shadow: none;
}