"Inline" border of a div

Question

This is what I want to archive:

This is my code:

.mybox {
  width: 200px;
  height: 60px;
  background-color: #00483b;
  /* ... and other simple stuff border: THIS IS MY PROBLEM */
}

<div class="mybox">Text Inside</div>

How can I draw a white border around my div? This border should be some pixels inside the box. I am pretty sure that I have seen something like that or am I wrong and that is not possible? How should I proceed then?

Answer 1

You can use outline, which draws an additional border outside of the normal border.

.mybox {
  width: 200px;
  height: 60px;
  background-color: #00483b;
  border: 1px solid white;
  outline: 3px solid #00483b;
}

<div class="mybox">Text Inside</div>