Tab design like brave browser

Mioni

Does anyone know how to modify the css to look like this?

luetage

Looks like Firefox tabs. See https://forum.vivaldi.net/post/723478

Mioni

@luetage there's a lot of customization, I just wanted to change the shape of the tabs or just remove that line under the tab, would that be possible?

barbudo2005

@Mioni

Try this code:

.tab

{border-bottom-left-radius: var(--radiusHalf) !important;
border-bottom-right-radius: var(--radiusHalf) !important; 
border-top-right-radius: var(--radiusHalf) !important;
border-top-left-radius: var(--radiusHalf) !important;
margin-left: 2px !important;
margin-right: 2px !important;
margin-top: 2px !important;
margin-bottom: 2px !important;}

Mioni

@barbudo2005

Nice is exactly how I want it, I use cornerd rounded 14 and this strange part appears, could you remove it? it appears when the tab is selected.

barbudo2005

@Mioni

If I understand correctly your image uses this code:

.tab::after,
.tab::before 
{display: none !important;}

If not, present a larger image and mark the problem.

Mioni

@barbudo2005 That's right, thank you very much!

barbudo2005

@Mioni

We seem to have the same taste for tabs: Detached and Floating

Mioni

@barbudo2005 Amazing design! Can I change the color of this line only when I have stacks of tabs?

barbudo2005

@Mioni

Look this post:

https://forum.vivaldi.net/topic/76205/automatic-color-for-active-tabs-active-tab-stacks-using-favicon?_=1654620418289

You could change "border" for "border-top" in this code:

.tab-position.is-substack  [id*= "tab"].tab.active

{border: 2.5px var(--colorAccentBgDarker) solid !important;}

undachen

Both brave and Vivaldi,I use them, and since brave's tabs have become rounded with a swoosh, it appears that the tab height is larger than before, which isn't good for the limited space of a 14" laptop. On the contrary, vivaldi's native tab height seems more compact which I personally prefer.

Mioni

@undachen I only wanted the shape of the tab and not the size, the size is perfect.