CSS Corners (Rounded w/ Inner Shadow)

It is now 1am - and I have spent the entire day trying to come up with a solution to rounded corners with an INNER rather than OUTER shadow. I have Googled. I have posted to every CSS listserv I am a member of to no resolve.. until now.

What I needed to do was to make this image into a flexible width, rounded corner CSS. I sliced up the image and used Roger’s Flexible CSS Teaser Box as my model. My result was not what I needed - and I was pointed by a few members of the WSG list to Roger’s other Flexible CSS w/ custom borders (which I have utilized in the past with no problem).

Only, it would not work either… It uses ONE image to create the borders on the right and left, and being as my shadows are set inside the box, I would have to have two (one left+shadow right, one right+shadow left) therefore this one would not work either…

I tried every possible CSS rounded corner template I could google to no avail… Kindly, Jeff Lowder of Accessibility 1st spent time that I am sure he did not have and got the solution (well at least for standard compliant browsers).

So now - I am thrilled to have at least a solution for compliant browsers!

Here it is: Flexible Rounded Corners with INNER shadow!

Thanks again Jeff!

Socialize my article: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • del.icio.us
  • bodytext
  • Facebook
  • StumbleUpon
  • Technorati

4 Responses to “CSS Corners (Rounded w/ Inner Shadow)”  

  1. 1 Jeff Lowder

    I’ve updated the page to now work across all browsers, have a look at http://www.accessibility1st.com.au/tutorials/rounded.html

    Always a pleasure to help.
    Cheers
    Jeff

  2. 2 headsfromspace

    Yes sir I like it. I like it a lot! Nicely done.

  3. 3 Sean Spurr

    You can see in finished results in action on http://www.classicliterature.net/george-orwell

  4. 4 vnuzday

    wow….. Really nice.!!!

    Thanks..