Effect How to - Add shadow to border-top only

Question

We would like to know how to add shadow to border-top only.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
<!-- ww  w  .ja  v  a  2  s .com-->
.awesome {
  background-color: rgb(255, 255, 255);
  margin-top: 100px;
  padding: 10px;
  border-top: 4px solid rgb(0, 130, 202);
  box-shadow: inset 0 -8px 4px 4px rgb(255, 255, 255), inset 0 2px 4px 0px
    rgba(50, 50, 50, 0.75);
}
</style>
</head>
<body>
  <div class="awesome">test</div>
</body>
</html>

The code above is rendered as follows: