Removing boxes around radio buttons

Question

On Chrome (chromium), IE and Opera browsers, but not Firefox, I have long boxes that are unsightly (made much worse when hover shadow effects are utilised).

The code which produces this effect must occur more than once as it only disappears when I delete a couple of my css files.

There is no specific mention of type="radio" in my css files. The form that the radio buttons are attached to has its own class.

To try and reset the css relating specifically to the radio buttons I used

#resetter {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

And then set the id of the radio buttons to "resetter", but no apparent change. If there is some way to remove this errant css affecting the radio buttons I would be delighted! (For the record I marked every line of the above with !important, just to be sure.

Answer 1

The fact that it didn't crop up in Firefox helped me solve the problem: it wasn't a border but a shadow.

Specifically:

-webkit-box-shadow: rgba(?, ?, ?, ?) ?px ?px ?px;

When substituted with:

-moz-box-shadow: ?px ?px ?px #?;

Compatibility was maintained with firefox, without resulting in ugly boxes on other browsers