SOURCE

<div class="face">
  <div class="point"></div>
  
</div>

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  vertical-align: flex-start;
  flex-wrap: wrap;
  font-family: 'Open Sans', sans-serif;
  
  background: linear-gradient(top, #222, #333);
}

[class$="face"] {
  width: 104px;
  height: 104px;
  background-color: #e7e7e7;
  padding:5px;
  
  box-shadow:
    inset 0 5px white,
    inset 0 -5px   #d7d7d7,
    inset 5px 0  #d7d7d7,
    inset -5px 0  #d7d7d7;
  
  border-radius:10%;
}

.point{
  width:24px;
  height:24px;
  background-color:black;
  
  border-radius:50%;
}