html - How can I add a shadow to actual screen frame on html?

Question

How can I add a shadow to actual screen frame on html on top of other content? If it's not possible then the same question for body frame.

This doesn't work:

body {
  -webkit-box-shadow: inset 0 0 10px #0d1f2b;
  -moz-box-shadow: inset 0 0 10px #0d1f2b;
  -o-box-shadow: inset 0 0 10px #0d1f2b;
  box-shadow: inset 0 0 10px #0d1f2b;
}

This shows a shadow on screen bounds but I can scroll it up by scrolling the content of the page:

.screen {
  position:absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: inset 0 0 10px #0d1f2b;
  -moz-box-shadow: inset 0 0 10px #0d1f2b;
  -o-box-shadow: inset 0 0 10px #0d1f2b;
  box-shadow: inset 0 0 10px #0d1f2b;
}

  <div class="screen"></div>

Answer 1

Thanks for Joao Palma's comment:

.screen {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: inset 0 0 10px #0d1f2b;
  -moz-box-shadow: inset 0 0 10px #0d1f2b;
  -o-box-shadow: inset 0 0 10px #0d1f2b;
  box-shadow: inset 0 0 10px #0d1f2b;
}

  <div class="screen"></div>

Unfortunately it doesn't work on iPad when keyboard is visible:( Relative question: fixed position div freezes on page (iPad)

Answer 2

body { -moz-box-shadow: 0 0 45px 45px rgba(50, 50, 50, 0.5);; -webkit-box-shadow: 0 0 45px 45px rgba(50, 50, 50, 0.5);; box-shadow: inset 0 0 15px 15px rgba(50, 50, 50, 0.5);; }

note :change values according to your requirement