Stylish CSS has no effect? CSS Order in Stylish?

Question

This is the website's CSS:

.bam_announcement {
    -moz-border-radius:5px;-webkit-border-radius:5px
}

And this is my Stylish CSS:

.bam_announcement {
    -moz-border-radius:0px;-webkit-border-radius:0px
}

But the website is still using 5px.

Do you have dev-tools or firebug installed? If so, inspect the element that has the border-radius, and verify that this exact rule is active. Maybe some other selector in your css sets the 5px? — Đinh Carabus, Apr 30 '15 at 16:28
Your code is incomplete. You have a live example? Maybe you defined it somewhere else aswell. — Dorvalla, Apr 30 '15 at 21:22

score 0 · Accepted Answer · edited May 23 '17 at 11:50

Because we can't be sure of the order that Stylish CSS will be applied -- relative to page CSS -- Stylish scripts often have to use the !important flag.

So make your Stylish CSS:

.bam_announcement {
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
}

In the rare cases where that doesn't work, see: How to override CSS Background that already has !important? .

Stylish CSS has no effect? CSS Order in Stylish?

1 Answers1