Question

I need to make rounded inputs with inner lighting like on this picture:

I can make the rounding like this:

.loginRounded{
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
    border-radius: 14px;
    outline: 0;
    -webkit-appearance: none;
}

But I can’t imagine how to make inner lighting with css3.

PS If it’s impossible the last way is to use the image as a background.

UPD

Done with box-shadow attribute. But my variant still not the same with psd-layout…

UPD2
Finally done http://jsfiddle.net/Z3SB9/1/ – and the last question – in what browsers it will work correctly?

Answer 1

box-shadow: inset is what you are looking for, take a look at http://jsfiddle.net/Z3SB9/ and play with the values!