Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Rohkem teavet

Teema arhiveeriti. Please ask a new question if you need help.

Remove separator in between Button and First Tab

  • 1 vastus
  • 0 on selline probleem
  • 1 view
  • Viimati vastas cor-el

EXC4L1BXR
EXC4L1BXR
more options

I wish to remove the ugly looking line between my custom home button and the first tab. You can find that on the top left. I already have userChrome.css set up and I found no help on the r/FirefoxCSS subreddit.

My userChrome.css code:

```

root {

--toolbar-field-focus-border-color: transparent !important; --toolbarbutton-inner-padding: 10px !important; --toolbarbutton-border-radius: 2em !important; --urlbar-container-padding: 0px !important; }

  1. nav-bar {

box-shadow: none; }

  1. urlbar {

padding: 8px !important; }

  1. urlbar-background {

background-color: rgb(255, 255, 255) !important; border-radius: 16px !important; box-shadow: rgb(230, 230, 230) 0px 0px 5px 0px !important; }

.tab-background { border-radius: 16px !important; box-shadow: rgb(225, 225, 225) 0px 1px 5px 0px !important; }

.tabbrowser-tab .close-icon{ border-radius: 2em !important; margin-right: 0px !important; }

.tabbrowser-tab .close-icon:hover { background-color: rgba(0, 0, 0, 0.05) !important; outline: none !important; }

  1. tabs-newtab-button:hover > .toolbarbutton-icon {

background-color: rgba(255, 255, 255, 0.25) !important; border-radius: 2em !important; }

  1. PlacesToolbarItems .bookmark-item {

padding: 5px; margin: 25px; }

  1. navigator-toolbox { border: none !important;}
  1. PersonalToolbar {

box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 4px !important; } ```

For anyone who can be of EXTRA help, I wish to also fully round the search bar in my "about:home" which you can see is underneath the FireFox logo. I want to add my own custom border radius of "2em" and remove the blue outline when selected.

I wish to remove the ugly looking line between my custom home button and the first tab. You can find that on the top left. I already have userChrome.css set up and I found no help on the r/FirefoxCSS subreddit. My userChrome.css code: ``` :root { --toolbar-field-focus-border-color: transparent !important; --toolbarbutton-inner-padding: 10px !important; --toolbarbutton-border-radius: 2em !important; --urlbar-container-padding: 0px !important; } #nav-bar { box-shadow: none; } #urlbar { padding: 8px !important; } #urlbar-background { background-color: rgb(255, 255, 255) !important; border-radius: 16px !important; box-shadow: rgb(230, 230, 230) 0px 0px 5px 0px !important; } .tab-background { border-radius: 16px !important; box-shadow: rgb(225, 225, 225) 0px 1px 5px 0px !important; } .tabbrowser-tab .close-icon{ border-radius: 2em !important; margin-right: 0px !important; } .tabbrowser-tab .close-icon:hover { background-color: rgba(0, 0, 0, 0.05) !important; outline: none !important; } #tabs-newtab-button:hover > .toolbarbutton-icon { background-color: rgba(255, 255, 255, 0.25) !important; border-radius: 2em !important; } #PlacesToolbarItems .bookmark-item { padding: 5px; margin: 25px; } #navigator-toolbox { border: none !important;} #PersonalToolbar { box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 4px !important; } ``` For anyone who can be of EXTRA help, I wish to also fully round the search bar in my "about:home" which you can see is underneath the FireFox logo. I want to add my own custom border radius of "2em" and remove the blue outline when selected.
Attached screenshots

All Replies (1)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Something like this should help to hide the border-left that is added under some conditions, you can remove the padding-left and margin-left as well. You can use #tabbrowser-tabs as the only selector to remove the border in all cases. 

:is(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs {
  border-inline-start: 0px !important;
  padding-inline-start: 0px !important;
  margin-inline-start: 0px !important;
}