CODEWITHSUNDEEP
htmlcss
Kani Lana
Kani Lana

Reputation: 109

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 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.

Upvotes: 3

Views: 1571

Answers (2)

DreamTeK
DreamTeK

Reputation: 34267

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>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273428

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>

Upvotes: 6

Related Questions