CSS Property Value How to - box-shadow: inset, inset ; add two layer borders








Question

We would like to know how to box-shadow: inset, inset ; add two layer borders.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.container {<!--  www. ja v  a  2  s .  c  om-->
  margin: 5px;
  width: 150px;
  background: yellow;
}

.border {
  padding: 35px 20px 20px 20px;
  box-shadow: inset 0 0 0 15px red, inset 0 15px 0 15px teal;
}
</style>
</head>
<body>
  <div class="container">
    <div class="border">Item one</div>
    <div class="border">Item two</div>
  </div>
</body>
</html>

The code above is rendered as follows: