Why background color hides border?

Question

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>

@ShobiDobi the border has opacity 0.4. It is supposed to be the same colour but more transparent. — Malvinka, Mar 29 '22 at 11:51

score 2 · Answer 1 · answered Mar 29 '22 at 11:33

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>

VIKESIR · Accepted Answer · 2022-03-29T13:14:37.180

-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);

edited Mar 29 '22 at 13:14

answered Mar 29 '22 at 11:45

VIKESIR

225
2
9

Why background color hides border?

2 Answers2