title: Customise Ngx-toastr in angular 6 with typescript
body: <p>Hii All i am implementing Ngx-toastr in angular 6 with typescript my problem is that i can't make it beautiful as i want because i dont't know which css is override on that <strong>ngx-toastr</strong> class i wrote some css on <strong>Style.css</strong> File <strong>ngx-toastr</strong> and i want <code>border-radius: 15px;</code> but inner part not taking rounded corner with <code>border-radius: 15px;</code> I search many resource from the internet but not getting proper output and i Can't Change other toastr Because in my project something around <strong>350+ Component</strong> i don't want to change on every file with method that's why i want to customize existing toastr CSS.</p>
  
  <p>This is my Css Code</p>
  
  <pre><code>.toast-container .ngx-toastr {
      position: relative;
      overflow: hidden;
      margin: 0 0 6px;
      padding: 15px 15px 15px 50px;
      width: 300px;
      border-radius: 15px !important;
      background-position: 15px center;
      background-repeat: no-repeat;
      background-size: 24px;
      box-shadow: 0 0 12px #999;
      color: #fff;
      border-image-source: linerar-gradient(red,purple) !important;
      border: 4px solid green !important;
      border-image-source: linear-gradient(red, purple) !important;
      border-image-slice: 20 !important;
  }
  
  .toast-success {
      background-color: #51a351;
  }
  </code></pre>
  
  <p>But My Expectation is I want same as in this picture if u want to check then visit this link and click on <strong>RESET</strong> button to show toastr <a href="https://piaf-vue.coloredstrategies.com/user/forgot-password" rel="noreferrer">Click Here to visit that site</a></p>
  
  <p><a href="https://i.stack.imgur.com/a8Xcw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/a8Xcw.png" alt="enter image description here"></a></p>
  
  <p>Here is my <a href="https://stackblitz.com/edit/angular-qnt8nz" rel="noreferrer">StackBlitz Code</a></p>