Showing box-shadow conditionally


I show box-shadow with this CSS code.

img {
    box-shadow: 2px 2px 1px #888;

enter image description here

I'd like to hide the boarder conditionally, and I tried to add "noboarder" class in img tag,

<img ... class="noborder">
    box-shadow: 0px 0px 0px #888;

However, I still have the shadow with the `class="noborder">code, what might be wrong?

Problem courtesy of: prosseek


try replacing #noborder with .noborder, you want it to be a class, not an ID.

Additionally, box-shadow: none is a neater alternative to remove the box shadow

Solution courtesy of: jsvk


Ok, there are a few things wrong here. First off, you have a class attribute in your HTML but you're trying to select the img with an ID selector #. You have to use the class selector .

Also, when overwriting a shadow so it does not appear, you have to set the color to transparent. The px measurements are for shadow offset, size and spread (if you use it) so these don't matter at all. Or use none in place of the measurements and color.

I changed the selector and class to better reflect what the CSS does, as a shadow is different from a border.

    box-shadow: 2px 2px 2px #888;

    2px 2px 2px transparent

     box-shadow: none;

And here's a jsfiddle demo to show you how it works.

Discussion courtesy of: Kyle

Use box-shadow: none to remove the shadow completely.

<div class="noborder">test</div>​

div {box-shadow: 2px 2px 1px #888;}
.noborder{box-shadow: none;}


Discussion courtesy of: bookcasey

This recipe can be found in it's original form on Stack Over Flow.