title: How do I remove a border on an Ion-Toolbar?
body: <p>I need help removing the border from the <code>ion-toolbar</code> in the <code>ion-header</code> in Ionic v4 (4.0.9).</p>
  <p>My objective is to remove this:</p>
  <p><a href="https://i.stack.imgur.com/P4cTY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/P4cTY.png" alt="my two toolbars with borders" /></a></p>
  <p>In my code I have a <code>ion-header</code> with two <code>ion-toolbar</code>. I've tried everything the <code>no-border</code> attribute inside <code>ion-header</code> and <code>ion-toolbar</code>.</p>
  <p>I've also tried adding the attributes to the .scss of my page like the following:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;ion-header no-border-bottom no-border-top no-border&gt;
    &lt;ion-toolbar color=&quot;dark&quot; no-border-bottom no-border-top no-border&gt;
      &lt;img src=&quot;../../assets/icoUserLogin.png&quot; alt=&quot;Logo Aikox&quot; slot=&quot;start&quot; witdh=&quot;20%&quot; /&gt;
      &lt;ion-title slot=&quot;primary&quot;&gt;
        Test
      &lt;/ion-title&gt;
    &lt;/ion-toolbar&gt;
    &lt;ion-toolbar class=&quot;ToolbarVerde&quot; color=&quot;medium&quot; no-border-bottom no-border-top no-border&gt;
      &lt;ion-buttons slot=&quot;start&quot;&gt;
        &lt;img src=&quot;../../assets/icoListado.png&quot; alt=&quot;Icono Listado&quot; slot=&quot;start&quot; width=&quot;70%&quot; /&gt;
      &lt;/ion-buttons&gt;
      &lt;ion-title&gt;
        &lt;span&gt;test&lt;/span&gt;
        &lt;br /&gt;
        &lt;span&gt;test&lt;/span&gt;
      &lt;/ion-title&gt;
      &lt;ion-buttons slot=&quot;primary&quot;&gt;
        &lt;ion-button (click)=&quot;Nuevo()&quot;&gt;
          &lt;img src=&quot;../../assets/icoRefresh.png&quot; alt=&quot;Icono Recargar&quot; width=&quot;70%&quot; /&gt;&lt;br /&gt;
        &lt;/ion-button&gt;
        &lt;ion-button (click)=&quot;Nuevo()&quot;&gt;
          &lt;img src=&quot;../../assets/icoNew.png&quot; alt=&quot;Añadir Parte de Trabajo&quot; width=&quot;70%&quot; /&gt;&lt;br /&gt;
        &lt;/ion-button&gt;
      &lt;/ion-buttons&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.toolbar-background{
      --border-width: 0px !important;
      border: 0 !important;
  }
  .toolbar-container{
      --padding-top: 0px !important;
      --padding-left: 0px !important;
      --padding-right: 0px !important;
      --padding-bottom: 0px !important;
      padding-top: 0px !important;
      padding-left: 0px !important;
      padding-right: 0px !important;
      padding-bottom: 0px !important;
  }
  .ToolbarVerde{
      --padding-top: 0px !important;
      --padding-left: 0px !important;
      --padding-right: 0px !important;
      --padding-bottom: 0px !important;
      padding-top: 0px !important;
      padding-left: 0px !important;
      padding-right: 0px !important;
      padding-bottom: 0px !important;
  }
  </code></pre>
  <p>But this is not working.</p>