css rounded border sizing with white space and anti-aliasing

I've tried putting together a simple scenario with css for a card style layout.

It looks ok on a 22 inch monitor, but when viewed on my samsung tv 1920x1080 resolution it does not look good.

It looks like the border has a white gap in it caused by anti-aliasing.

html

<main>
  <div class="card-holder">
    <div class="card-header">
      <div class="card-icon">
        <span class="icon icon-bell"></span>
      </div>
      <span class="card-title">Title</span>
    </div>

    <div class="card-about">
      <span>Some about text.</span>
    </div>

  </div>
</main>

css

.card-holder {
  border-radius: 10px 10px 0px 0px;
  border: 3px solid rgb(0, 0, 0);
  border-spacing: 0;

  overflow: hidden;
  width: 300px;
}

.card-header {
  display: flex;
  align-items: center;

  padding: 5px;

  background-color: rgb(0, 64, 255);
  color: #fff;

  overflow: hidden;
}

.card-title {
  display: inline-block;
  flex-grow: 1;
  text-align: center;
}

.card-about {
  display: block;
}

.card-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  border-radius: 50%;
  background-color: white;
  overflow: hidden;

  height: 64px;
  width: 64px;
}

.icon {
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  height: 48px;
  width: 48px;
  vertical-align: middle;
}

.icon-bell {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bell-black.svg);
}

When I zoom the browser to 80% then a white line appears at the right hand side of the card.

Is there a recommended approach to make this scenario work nicely across different zoom levels and monitor resolutions?

I've been tearing my hair out.

Update

I made a codepen here