Transparency isn't working on button border

Question

I am trying to make the following little collection of buttons:

My first thought is simply make them each a set width and height and then have the border only show when the button is active. I can't however get the opacity property of the rgba function to work for border-color or like so border: 5px solid rgba(201, 36, 36, 0.2) I have looked over the docs on the border property as well as tried messing with a simple button in a jsfiddle to see if there is a property I am adding in my CSS that is somehow overriding the border but nothing is working and all docs lead me to believe this is possible...

This is my current CSS:

const StyledDot = styled.button`
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
  background: #a3afba;
  margin-right: 11px;

  &.active {
    background: rgba(201, 36, 36, 1);
    border-color: rgba(201, 36, 36, 0.2);
  }
`;

Answer 1

It not how borders works. They "put" over the background.

I was first thinking about the outline property, but the raduis isn't used to render it :

span {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
  background: #a3afba;
  margin-right: 11px;
}
span.active {
  background: rgba(201, 36, 36, 1);
  outline: 5px solid rgba(201, 36, 36, 0.2);
}

<span></span>
<span class="active"></span>
<span></span>

So you may use box-shadow :

span {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
  background: #a3afba;
  margin-right: 11px;
}
span.active {
  background: rgba(201, 36, 36, 1);
  box-shadow: 0 0 0 5px rgba(201, 36, 36, 0.2);
}

<span></span>
<span class="active"></span>
<span></span>