Transparent space between div and border with a border radius - html

Question

I am trying to get something like this:
I've tried using outline but I can't set the border radius on an outline. I've also tried a box shadow with a white border but I need the border to be transparent. Any ideas would be greatly appreciated.
can't set border radius of the outline with this:
.btn {
outline: 1px solid #B54104;
outline-offset: 1px;
}
gap between outline and button is not transparent:
.btn {
border: 1px solid #fff;
box-shadow: 0 0 0 1px #c5170a;
}
The gap between the button and the offset outline must be transparent.

Answer 1

You can try a background coloration relying on background-clip to avoid coloring a part of the button:
.button {
display:inline-block;
padding:3px; /*control the spacing*/
width:100px;
text-align:center;
line-height:30px;
border-radius:15px;
color:#fff;
border:2px solid orange;
background: orange content-box; /*color only the content*/
}
body {
background:pink;
}
<div class="button">
button
</div>
Same idea using padding-box and controling the space with border:
.button {
display:inline-block;
width:100px;
text-align:center;
line-height:30px;
border-radius:15px;
color:#fff;
border:5px solid transparent; /*control the spacing*/
background: orange padding-box; /*don't color the border*/
box-shadow: 0 0 0 2px orange;
}
body {
background:pink;
}
<div class="button">
button
</div>

Answer 2

border-radius now works fine with outline.
.btn {
display: inline-block;
margin: 20px;
padding: 15px 30px;
background-color: #b54204;
border-radius: 5px;
color: #fff;
outline: 2px solid #b54204;
outline-offset: 4px;
}
<div class="btn">
BUTTON
</div>