<html>
<style>
.box {
  border: 2px solid green;
  padding: 2px;
  height: 25px;
  width: 25px;
}

.container {
  border: 2px solid blue;
  height: 75px;
  width: 75px;
  position: absolute;
}

.topleft {
  position: absolute;
  top: 0px;
  left: 0px;
}

.topright {
  position: absolute;
  top: 0px;
  right: 0px;
}

.bottomleft {
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.bottomright {
  position: absolute;
  bottom: 0px;
  right: 0px;
}
</style>
<body>
<div class="container">
<div class="topleft box"></div>
<div class="topright box"></div>
<div class="bottomright box"></div>
<div class="bottomleft box"></div>
<div style="width:100%; height:100%; background: gray;"></div>
</div>
<div class="container" style="padding:10px; left:100px; top:0px">
<div class="topleft box"></div>
<div class="topright box"></div>
<div class="bottomright box"></div>
<div class="bottomleft box"></div>
<div style="width:100%; height:100%; background: gray;"></div>
</div>

</body>