If you want to change the top border style of the active tab then you’ll need to first define a style for the border of the anchor tag (which actually represents the tab in the rendered html). Then set whatever style you want to, for example, add the following css code in your app.scss file to affect the top border of the active tab:
Now that you’ve said the above, I am not sure as to why are you looking for a manual way in the first place? Earlier I had assumed that you were trying to place the highlight bar at the top of the tabs regardless of whether the tabbar itself was on the top of the screen or bottom.
I’d like to know what does or doesn’t the tabsHighlight attribute do in your case so that you need to manually put a border; because it’s always a good practice to use the intrinsically available provisions to do a thing.
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:
Nice solution, thank you.
How can I put a border on top for all the tabs menu? Because this one’s for the selected tab, and I also need one fixed for all the tabs, like the default grey, but with other color.