The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Inner Box Shadow, on one or two Sides?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #35634

    Is it possible to have a div with an inset Shadow that just shows on the top and the bottom side?

    As it is an existing webpage i’m not that flexible – e.g.: i can not increase the width and use other div’s to cover the left and right edges.

    So i have a div (850px * 45px) width a horizontal gradient (c1-c2-c1) and would like to have an inner shadow on the top and the bottom.

    Of course i could use png’s … but … that’s not sexy enough ;-)



    If you can’t use other DIVs for left and right, can you place DIVs or P’s or other elements inside the div? If that’s the case, I would do something basic-ish like this:


    I have not fully tested this in all browsers (I used a gradient generator and then changed a few things here and there) but perhaps you get the idea. It’s more to show you the nested divs approach for this.



    Whoa @Senff! How about just doing this:


    Much, much better. I stand corrected! I did not even think of that….. o_O


    @joshuanhibbert: Thanks. That is the perfect solution. I tried something similar but did not manage to find the correct values.


    No worries!

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.