Hi! I have this in my css: #contentcell { border-top: 1px solid #C9CBDD; border-left: 1px solid #C9CBDD; border-right: 1px solid #C9CBDD; border-bottom: 1px solid #C9CBDD;} How can I ad shadow to just the border-right? Thank you for any help.
Use this code .shadow { -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; } Code (markup): To Change the right shadow just the second value..
Thank you for the input. I need a bit more help. How would you apply the code above to the border-right property only?
1) if all four sides are getting the same border, you only need ONE declaration, not four. border:1px solid #C9CBDD; 2) shadows have NOTHING to do with your border declaration. As Anujak posted you want box-shadow (preferably without the idiotic "let's stuff multiple properties onto one illegible line" rubbish)... which you could probably just google, but I'll break it down here: box-shadow:xOffset, yOffset, blur, <spread>, color; box-shadow works like there was a second box underneath with it's own background that you can 'offset' from the parent box that's over it... so if you put a positive xOffset, it will render to the right... a negative xOffset and it starts to show on the left... yOffset doing the same thing up and down. Blur distorts the edges to make it less harsh, but be warned this can cause it to creep out at the top and bottom. (unless you add another wrapper set to overflow:hidden, there's no way to control this). Color should be fairly self explanatory, what color you want it to be. Spread makes it 'grow' in all directions out from under the parent, and is a optional value. So for a black shadow 8px to the right with a harsh edge: box-shadow:8px 0 0 #000; for a blurred shadow that's primarily right with a softer edge: box-shadow:4px 0 4px #000; ... and as Ajunjak showed, it's still a good idea to send the -moz and -webkit prefixed versions as a lot of people are still using outdated versions of those browser engines. (the latter in particular thanks to iOS) But really your question is mis-worded as the shadow is added to the right of the element, NOT to the border. The border just so happens to be in the same place. Also this is CSS3, so IE8/lower it won't work, and you'd have to use an extra wrapper and a image file to do it there.