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

user_8305219 0
Viewed 21988

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;
}
bootstrap-4 twitter-bootstrap border css html
7 Answers

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

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

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

user_74675670

This worked for me. Try

.card, .card-header, .card-body, .card-footer{
    border-radius:0px !important;
}
user_119949590

You may try this:

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

This is how I did it in SCSS

@if $enable-rounded == false {
  .card {
    .card-header {
      border-radius: 0;
    }
    .card-body {
      border-radius: 0;
    }
    .card-footer {
      border-radius: 0;
    }
  }
}

You will have to include the SCSS variable $enable-rounded before loading bootstrap SCSS.

user_55025900 
            <div class="card-tools">
              <select class="form-control" name="dropdown_media">
                      <option value="1">Active Media</option>
                      <option value="0">Blocked Media</option>
                      <option value="all_media">All Media</option>
              </select>

            </div>
          </div>
user_140323280 
<div class="card"><div class="card-header">...

You need to declare border-radius: 0; for both classes card & card-header

user_52592980
Related