Drawing a square line with CSS, inset within a div

I was wondering if it were possible to trace a 1px square outline, inset a specific distance inside a div. Currently, the css and HTML looks like this

.object {
    width: 100px;
    height: 100px;
    background-color: red;
    color: white;
    padding: 5px;
}
<div class="object">
    Hello World!
</div>

Method #01:

You can draw outline and use outline-offset property.

Note: outline-offset is not supported by IE.

.object {
  outline: solid #fff 1px;
  outline-offset: -5px;
  width: 100px;
  height: 100px;
  background-color: red;
  color: white;
  margin: 5px;
  padding: 10px;
}
<div class="object">
    Hello World!
</div>

You can play with box-shadow attribute:

.object {
    width: 100px;
    height: 100px;
    background-color: red;
    border: 1px solid white;
    color: white;
    margin: 5px;
    padding: 5px;
    box-shadow: 0 0 0 5px red;
}
<div class="object">
    Hello World!
</div>

Something like this should do it

.object {
    width: 100px;
    height: 100px;
    background-color: red;
    color: white;
    padding: 5px;
    position: relative;
}
.object::after {
    content:"";
    display: block;
    position: absolute;
    width: 97.5px;
    height: 97.5px;
    top: 5px;
    left: 5px;
    border: 1px solid #fff;
}

You could use the border property and set a margin (because margin is outside the border). If you don't want the total size of the div to change, reduce padding to compensate for the margin.

Also possible with two box-shadows:

.object {
    width: 100px;
    height: 100px;
    background-color: red;
    color: white;
    padding: 5px;
    box-shadow: inset 0 0 0 4px red, inset 0 0 0 5px #fff;
}
<div class="object">
    Hello World!
</div>

You can solve this issue by adding a span inside div or write a jquery script to add it automatically.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
    .object, .object-js {
        width: 100px;
        height: 100px;
        background-color: red;
        color: white;
        padding: 5px;   
        position: relative;
    }
    .object span, .object-js span{
        border: 1px solid #ffffff;
        padding: 2px;
        height: calc(100% - 5px);
        display: block;
        overflow-y: auto;
    }
</style>

</head>
<body>
<div class="object">
   <span>Hello World.</span> 
</div>
 <br>
<div class="object-js">
   Hello World.
</div>
</body>
  <script>
    $( document ).ready(function() {
      var html = $(".object-js").html();
      $(".object-js").html("<span>"+html+"</span>");
    });
    </script>
</html>