DＩＶ要素を入れ子にして、それぞれ別の枠線スタイルを指定するとこの様に一味違う枠線ができます。
入れ子にする要素の幅や高さは詳細に指定します
外側は
<div style="border:3px dotted #008000; position: relative; width: 500px; height: 150px; z-index: 1; left: 50px; top: 50px" id="layer1">
内側は
<div style="border:3px solid #FF00FF; position: relative; width: 492px; height: 140px; z-index: 1; left: 1px; top: 2px" id="layer1">
内側指定には、上下左右の余白の他、枠線の太さも考慮に入れます。