Page Widget How to - Create Shading glass border

Question

We would like to know how to create Shading glass border.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.glass_border {<!--from  ww  w  . j a v a2  s. c  o  m-->
  margin: 1em;
  height: 10em;
  width: 15em;
  box-shadow: .1em .1em .2em rgba(0, 0, 0, .2);
  border-radius: .3em;
  border: .4em solid rgba(255, 255, 255, .1);
}

.glass_border>div {
  height: 100%;
  background: #f0edcc;
  box-shadow: inset 0 0 1px black;
}
</style>
</head>
<body>
  <div class="glass_border">
    <div></div>
  </div>
</body>
</html>

The code above is rendered as follows: