'Why background color hides border? [duplicate]

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>
css


Solution 1:[1]

Add this inside your help_button 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);

Solution 2:[2]

Because background extends under the border...you can fix that with background-clip

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.help_button {
  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;
  background-clip: content-box;
}
<button class="help_button" aria-label="help and feedback form" id="open_feedback_form">?</button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Paulie_D

Related Questions