html - Cross-browser double border / inner outline -

what proper way re-create subtle inner outline following works cross-browser?

currently, i've outer div , inner div both have border of different color. there solution uses 1 div , not two?

jsfiddle demo

what type of approach make div container border , padding. , have div inner border. way container can hold outer border , contained border colors. , inner div can hold inner border color.

html

<div class="outer">  <div class="inner">     <div class="content">         text.<br>         other stuff,<hr>         in here too.     </div>  </div> </div> 

css

body{  background-color:#545454; } .outer{  border: 2px solid black;  padding: 3px;  border-radius:4px;  width:200px;  height:200px;  background-color:#858585; } .inner{  background-color:#545454;  width:196px;  height:196px;  border-radius:4px;  border:2px solid black; } .content{  color:white;  padding:5px; }