How can I remove this black line under the tab bar (or under the address bar)?

[QuelloChe357]

I've tried to remove it by following this thread "https://forum.vivaldi.net/topic/57204/is-there-any-way-to-remove-this-black-line-under-the-address-bar-via-css" but the code doesn't work, so I wanted to figure it out for myself but the black line is still here.

[DoctorG]

@QuelloChe357

.address-top .mainbar {
    border-bottom-width: 0px !important; 
}

Does not work?

---

Welcome in our Vivaldi Community
Do not hesitate to ask, we are a community to help users.
Enjoy browsing with Vivaldi.

[QuelloChe357]

@DoctorG The line is still here, but if I move the address bar to the top it seems to not be visible anymore. Maybe it's a problem with the address bar being under.

[DoctorG]

@QuelloChe357 Let me check this again. UI is too complex for me. I can not fixit.

[Pathduck]

@QuelloChe357 When you want others to help you, you need to give enough information so that they can actually help.

• Your version of the browser - because the UI changes from version to version.
• Location of the UI elements you have - because every user has their own setup and location of address bar, tab bar, bookmarks bar and so on.
• Any special theme settings you've changed - because the CSS is highly depending on theme settings.
• Any custom CSS you're already using - because it's impossible to help if you have other CSS interfering.

[Pathduck]

They change this code around very often. Using CSS code from old topics about this is pointless. The only way you can figure this out yourself is learning to inspect the UI and fixing it when it's changed.
https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools

The "line" is now a box-shadow set on the #header element.
There is also a very subtle box-shadow on the #tabs-tabbar-container element.

#browser #header,
#browser #tabs-tabbar-container {
    box-shadow: unset !important;
}

The styling for various elements also change depending on their position in the UI. You'll need to account for that in the CSS as well if needed.

[QuelloChe357]

@DoctorG It was really complicated to find it. I finally identified the code that makes the border disappear both below and above:

div#browser {
    --colorBorder: none !important;
}

Edit: I noticed now that @Pathduck already posted the solution, so probably his code would work better than mine

[Pathduck]

@QuelloChe357 What your code is doing is unsetting the CSS variable colorBorder set on the #browser element. This variable is changed depending on your theme contrast settings (and possibly other values).

The code I posted removes the drop-shadow that causes the line to appear.

Your code might work just fine, depending on your theme and its settings, especially contrast. So test your code with other themes and other settings if it does what you want. Otherwise you just risk changing theme and the "line" is back.

Also, your code is a global change for the entire browser UI - it will also unset the color set on other UI elements, which may not be what you want.

[QuelloChe357]

@Pathduck Just tested the code on other themes and settings (with and without my other css modifications), seems that there aren't any problems.