That is caused by this CSS code.

#back-button .toolbarbutton-icon {
  border: 1px solid var(--backbutton-border-color);
  border-radius: 10000px;
}

If you unset the border-radius then you get a square border.

#back-button .toolbarbutton-icon {
  border-radius: unset !important;
}

You can set the border to none to remove the border.

#back-button .toolbarbutton-icon {
  border: none !important;
  border-radius: unset !important;
}

It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.

• https://support.mozilla.org/en-US/kb/use-troubleshooting-information-page-fix-firefox

You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

See also:

• https://www.userchrome.org/what-is-userchrome-css.html
• https://www.userchrome.org/how-create-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

• toolkit.legacyUserProfileCustomizations.stylesheets = true

See:

• https://www.userchrome.org/firefox-changes-userchrome-css.html

cor-el said

That is caused by this CSS code.

#back-button .toolbarbutton-icon {
  border: 1px solid var(--backbutton-border-color);
  border-radius: 10000px;
}

If you unset the border-radius then you get a square border.

#back-button .toolbarbutton-icon {
  border-radius: unset !important;
}

You can set the border to none to remove the border.

#back-button .toolbarbutton-icon {
  border: none !important;
  border-radius: unset !important;
}

---

It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.

• https://support.mozilla.org/en-US/kb/use-troubleshooting-information-page-fix-firefox

You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

See also:

• https://www.userchrome.org/what-is-userchrome-css.html
• https://www.userchrome.org/how-create-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

• toolkit.legacyUserProfileCustomizations.stylesheets = true

See:

• https://www.userchrome.org/firefox-changes-userchrome-css.html

what do i do after i make the css file?

Hi Johnsilverknight, the userChrome.css file goes into a specific folder described in the articles (named chrome, in your currently active Firefox profile folder). Which articles have you reviewed so far?

jscher2000 said

Hi Johnsilverknight, the userChrome.css file goes into a specific folder described in the articles (named chrome, in your currently active Firefox profile folder). Which articles have you reviewed so far?

I followed the directions in the reply to the T

So, current status is:

(A) Your userChrome.css file at
/Firefox/Profiles/[profilefolder]/chrome/userChrome.css contains

#back-button .toolbarbutton-icon {
  border: none !important;
  border-radius: unset !important;
}

(B) You made the about:config change:

(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.

(2) In the search box above the list, type or paste userprof and pause while the list is filtered

(3) Double-click the toolkit.legacyUserProfileCustomizations.stylesheets preference to switch the value from false to true

(C) You quit Firefox and started it up again, and...

jscher2000 said

So, current status is: (A) Your userChrome.css file at
/Firefox/Profiles/[profilefolder]/chrome/userChrome.css contains

#back-button .toolbarbutton-icon {
  border: none !important;
  border-radius: unset !important;
}

(B) You made the about:config change:

(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.

(2) In the search box above the list, type or paste userprof and pause while the list is filtered

(3) Double-click the toolkit.legacyUserProfileCustomizations.stylesheets preference to switch the value from false to true

(C) You quit Firefox and started it up again, and...

Didn't work The code I put in is

1. back-button .toolbarbutton-icon {

 border: none !important;
 border-radius: unset !important;

}

It turns into a square and is still there

Can you post a screenshot that shows the file path of the userChrome.css file and its content ?

Path of the userChrome.css: C:\Users\Joshua\AppData\Roaming\Mozilla\Firefox\Profiles\tbggjj5e.default-release\chrome\userChrome.css

Contents of userChrome.css:

1. back-button .toolbarbutton-icon {

 border: none !important;
 border-radius: unset !important;

}

You did confirm that userChrome.css is a CSS file and not a Text file with a possible .txt file extension appended (userChrome.css.txt) ?

Johnsilverknight said

Didn't work The code I put in is

#back-button .toolbarbutton-icon {
  border: none !important;
  border-radius: unset !important;
}

It turns into a square and is still there

Hmm, if it's a square, the border-radius rule is working. But the border should be gone. If you mean there is a white square due to the background color, you may also need to override that. Here's a rule set you could try:

/*** Style Back button like Forward button ***/

:root:not([uidensity="compact"]) #back-button .toolbarbutton-icon {
  /* Remove border and background color */
  border: unset !important;
  background-color: unset !important;
  /* Used for hover */
  border-radius: var(--toolbarbutton-border-radius) !important;
}

/* Override hover background color */
:root:not([uidensity="compact"]) #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon {
  background-color: var(--toolbarbutton-hover-background) !important;
}

/* Use standard sizing formulas */
:root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon {
  height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
  width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
  padding: var(--toolbarbutton-inner-padding) !important;
}

cor-el said

You did confirm that userChrome.css is a CSS file and not a Text file with a possible .txt file extension appended (userChrome.css.txt) ?

It is a .css file. I have extensions enabled.

jscher2000 said

Johnsilverknight said

Didn't work The code I put in is

#back-button .toolbarbutton-icon {
  border: none !important;
  border-radius: unset !important;
}

It turns into a square and is still there

Hmm, if it's a square, the border-radius rule is working. But the border should be gone. If you mean there is a white square due to the background color, you may also need to override that. Here's a rule set you could try:

/*** Style Back button like Forward button ***/

:root:not([uidensity="compact"]) #back-button .toolbarbutton-icon {
  /* Remove border and background color */
  border: unset !important;
  background-color: unset !important;
  /* Used for hover */
  border-radius: var(--toolbarbutton-border-radius) !important;
}

/* Override hover background color */
:root:not([uidensity="compact"]) #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon {
  background-color: var(--toolbarbutton-hover-background) !important;
}

/* Use standard sizing formulas */
:root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon {
  height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
  width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
  padding: var(--toolbarbutton-inner-padding) !important;
}

How do I code this in and where do I code it in? What do I copy and paste?

Johnsilverknight said

How do I code this in and where do I code it in? What do I copy and paste?

That new code block is for your userChrome.css file.

jscher2000 said

Johnsilverknight said

How do I code this in and where do I code it in? What do I copy and paste?

That new code block is for your userChrome.css file.

Thank you so much! This worked!