Okay now I get it. Actually, you used the word ‘top border’ so I was confused a bit as that top border becomes the bottom border if the tab bar placement is at the top of the screen.
Anyways, we don’t have to manually add borders in this case. But there are complications, heres what I’ve found in this regard. The $tabs-border-color is not working yes, and even if it worked, it wouldn’t have been useful right now as there is a ionic bug that stops the highlighted border to show up on ios. So from what I’ve checked till now, you’ve got the following two options:
Option 1: If you need platform specific look and feel, then first use the css code blusk0 has posted in the bug link I’ve provided above as a workaround for ios. This will ensure that you get the border on ios in the first place. Now to actually change the colors for each platform, you’ll have to target each platform in your css individually (let me know if you want this and I’ll help you), that is, if you want just the border color to change. Otherwise, you can use the $tabs-tab-color-active variable to change the color of the borders as well as the texts and the icons for all the platforms at one go.
Option 2: Personally I’d go for this option and it is that you can simply change the mode of the tab itself to md. Firstly this will bypass the bug on ios and show the border there without doing anything else, and secondly, you’ll need simpler css to get the proper result on all the platforms. Here is how you can achieve this:
Define your tab like this specifying the mode attribute:
<ion-tabs mode="md" tabsHighlight="true" tabsPlacement="bottom">
Then to change the color of the border for all platforms add this css in your app.scss file:
.tabs-md[tabsHighlight="true"] .tab-highlight {
background-color: red;
}
If it’s okay for you that the text color, icon color and the border color all change then use the $tabs-tab-color-active variable rather.