CODEWITHSUNDEEP
css
knightrider
knightrider

Reputation: 2583

How to create box-shadow only on left, right and bottom?

I tried to find solution (tricks) how to use box-shadow on left, right and bottom. I can only manage to find left, right and bottom at CSS3 Box Shadow on Top, Left, and Right Only.

I tried to change the value base on that, but unfortunately, it didn't work out. So if anyone has the solution already, please kindly provide it. Thank you.

With Regards,

Upvotes: 14

Views: 42664

Answers (2)

G2.0
G2.0

Reputation: 107

Using multiple shadows without blur and spread radius

box-shadow: 
    /* Bottom shadow */
    0px 1px 0px black,
    
    /* Left shadow */
    -1px 0px 0px black,
    
    /* Right shadow */
    1px 0px 0px black,
    
    /* No top shadow */
    0px 0px 0px 0px;

This is equivalent to 1px solid black border to the top, left and right.

Upvotes: 2

knightrider
knightrider

Reputation: 2583

Sorry everyone,

I just found out the answer by using the following code.

-moz-box-shadow: 0px 3px 8px rgb(100,100,100);
-webkit-box-shadow: 0px 3px 8px rgb(100,100,100);
box-shadow: 0px 3px 8px rgb(100,100,100);

Upvotes: 20

Related Questions