Shadow inside of a div

Question

Is it possible to display a shadow inside a div box without using pictures? Instead I want to use css commands.

So is there some command like: -webkit-box-shadow: 1px inset; ?

Answer 1

Yup there is a command inset. like this:

-webkit-box-shadow: 0 0 1px 3px #000 inset;
-moz-box-shadow: 0 0 1px 3px #000 inset;
box-shadow: 0 0 1px 3px #000 inset;

You can generate from here http://css3generator.com/

Answer 2

In CSS3 there's box-shadow which can also be inset to do exactly what you need. This is supported by the following browsers:

• Chrome >= 10.0 (>= 4.0 with -webkit prefix)
• Firefox >= 4.0 (>= 3.5 with -moz prefix)
• IE >= 9.0
• Opera >= 10.5
• Safari >= 5.1 (>= 5.0 with -webkit prefix)