How to remove any instance of "border-radius: 100%;" on a certain website?

Question

I want to disable this line from appearing in the inspect element on one website only. How do I make firefox do this automatically? If possible, just make it an addon because IDK how and I dont know how to code. Not going to learn.
Has to work in firefox 28, and I only want to prevent Firefox from loading this line.

Answer 1

Aha, okay, you can use a custom style rule to hack the page. I realize this kind of looks like coding, but the code is already written, so it's more like copying and pasting.
First, you can install the Stylish extension. This add-on makes it easier to apply custom style rules to pages (and, if necessary, Firefox's UI). You can get it here: https://addons.mozilla.org/firefox/addon/stylish/
Second, you'll need to select and copy this six-line style rule:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("www.mineheroes.net") {
.avatar img, .avatar .img, .avatarCropper {
border-radius: 2px !important;
Third, load up a thread in the site and look for the Stylish "S" icon on the toolbar. ''(If necessary, you can use the Customize feature to add it to the toolbar temporarily. See: [[Customize Firefox controls, buttons and toolbars]].)''
Click the S, then Write New Style, then Blank Style.
A new tab should open with the cursor next to "1" (the line number counter).
Paste the rule you copied earlier and click Preview.
When you switch back to the forum, the avatar icons should be (mostly) square again.
I have attached a screen shot showing what that should look like. ''(To shrink the rule editor to a small box, I first right-clicked the tab and used Move to New Window.)''
Assuming it worked, you can switch back over the Stylish editor, give your rule a name, and save it.
Any luck?