Remove Border on Bootstrap 5 navigation-toggler using regular css-CodePudding

I am looking to remove the light grey border on the mobile 'hamburger' menu. I am using font-awesome and Bootstrap 5 (drought in through CDN) to create it, but can't seem to remove the rounded border.

html

    <nav class="navbar navbar-expand-lg navbar-light" role="navigation">
    <div class="container">
    
        <a class="navbar-brand" href="#">Navbar</a>
        <button
            class="navbar-toggler" 
            type="button" 
            data-bs-toggle="collapse" 
            data-bs-target="#navbarSupportedContent" 
            aria-controls="navbarSupportedContent" 
            aria-expanded="false"
            aria-label="Toggle navigation">
            <i class="fas fa-bars"></i>
        </button>

     ...

css

.navbar-toggler {
  &:focus {
    outline: none;
  }
}

Everything works fine except the border showing: JSfiddle link here:

You can change from CSS with the following:

.navbar-light .navbar-toggler {
    border-color: transparent !important;
}