Why background color hides border?

I’ve got a button that I would like to have a thick border that has lower opacity then the button itself. But adding the background color hides the border. How to fix it? (In the snippet code uncomment background-color to reproduce the issue)

.help_button {
    position: fixed;
    bottom: 10rem;
    right: 10rem;
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    border: 10px solid rgba(243, 147, 37, 0.4);
    font-style: normal;
    font-weight: 600;
    font-size: 2.5rem;
    line-height: 150%;
    color: #ffffff;
    // background-color: #F39325;
}

<button class="help_button" aria-label="help and feedback form" id="open_feedback_form">?</button>

>Solution :

Add this inside your css->

-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */

Or you can use box-shadow ->

border: none;
box-shadow: 0px 0px 0px 10px rgba(243, 147, 37, 0.4);