Removing border-radius in Bootstrap 4 | list-group-item

Question

I am new to bootstrap and have been over riding bootstrap border-radius property with my custom CSS class.

.border-radius-none{
    border-radius: 0;
}

Image:

This does work for all the cases but while over riding list-group-item, first and last element are not over ridden.

1. My main css is linked below the bootstrap css.(As in below snippet)
2. Read article on CSS specificity, which doesn't help me out.

Things I tried

1. Added !important to my css.

Is there any other way to remove bootstrap border-radius default value, without using important ?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
    crossorigin="anonymous">
<link href="./Main.css" rel="stylesheet">


<li class="list-group-item bg-black white-text border-none">
    <div class="row">
        <div class="col-9"> Latest Jobs </div>
        <div class="col-3">
            <a href="#" class="mr-auto">View all</a>
        </div>


    </div>
</li>

Answer 1

Some of the class are predefined in bootstrap as per the documentation class="rounded-0" which will set border-radius to 0

https://getbootstrap.com/docs/4.0/utilities/borders/#border-radius

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container-fluid">
   <ul class="list-group">
     <li class="list-group-item rounded-0">Cat</li>
     <li class="list-group-item rounded-0">Dog</li>
     <li class="list-group-item rounded-0">Rabbit</li>
     <li class="list-group-item rounded-0">Alpaca</li>
   </ul>
 </div>

Answer 2

Add this class to your css to override .list-group-item or .list-group-item:last-child and place the link to your css after the boostrap css link

    .list-group-item{
                border-radius: 0;
     }

or

.list-group-item:last-child{
                border-radius: 0;
     }