Browsers are ignoring CSS Selector?

Question

I've got this selector code:

#ajax_hits_counter_popular_posts_widget-2.widget li img {
// Give the thumbs in the widget some style
border-radius: 5px;
margin-right: 10px;
border: 4px solid #353434 !important;
}

Everything is rendering properly except for the border: 4px solid #353434 !important;

When viewing in either Firebug or Chrome Dev Tools, the border: property doesn't even show up at all, while the others do.

If I manually type the same exact code into Firebug or Chrome tools, it works fine.

Live is here (it's the "Top Posts" thumbnail widget at the bottom right): Meanwhile, In America

Anyone know why?

Answer 1

// Give the thumbs in the widget some style

is invalid in CSS. The browser seems to ignore the following property, as you can see in this example. If you remove the "comment" it works as expected. (On your page, the border declaration directly follows the "comment", unlike in the CSS posted here)

Comments in CSS have to be enclosed in /* ... */.

---

As tim.baker mentions, you have have to use border instead of border-style.