Ion-toolbar border color not working-How do I use custom CSS properties from documentation?-CodePudding

//--border-color is a property is copied from ionic documentation, yet it is not working. Below is an example of my codes. I am trying to use custom CSS properties , but it does not seem to work!

<ion-content>
    <ion-header [translucent]="true">
      
    
      <ion-toolbar  > 
     <ion-title>
    
      Parent's Login Portal
    
    
     </ion-title>
    <ion-buttons slot="start">  <ion-back-button defaultHref="#"></ion-back-button> </ion-buttons>
     
      </ion-toolbar>
    </ion-header>
    
    

    </ion-content>

.toolbar{
--border-color:sucess;
}

CodePudding user response：

As per documentation: use this css:

ion-toolbar{
  --border-color: red!important; 
  box-shadow: 0px 0px 0px 1px red;
}

In iOS toolbar have border in Android it have box-shadow.

Check Documentation: https://ionicframework.com/docs/api/toolbar#borders