How to Make Card Header No Border Radius in Bootstrap 4?

Question

How can make the card-header have no border radius on bootstrap 4? I've implemented this one BUT the background color of the card-header overlaps the card-header therefore the card-header still have border-radius

.card-header {
    height: 50px;
    background-color: #000;
    border-bottom-color: #fff;
    border-top: none;
    border-radius: 0;
}

Answer 1

To remove the radius, specify a class rounded-0. Bootsrap 4.

<button type="button" class="btn btn-primary rounded-0">...</button>

Answer 2

As you wrote in your comment, Bootstrap adds border-radius to the first-child of .card-header.

I suggest, that this is in this case the background-color.

When you overwrite it, it should be solved:

.card-header:first-child {
  border-radius: 0;
}

JSFiddle