Transparent Space Between Div And Border With A Border Radius

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 b

Solution 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;
}

<divclass="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: 0002px orange; 
}

body {
 background:pink;
}

<divclass="button">
button
</div>