Display div border on top of another div [duplicate] - html

Question

I wanna achieve the following result by using CSS:
So basically I want the circle to be on top of the button background but behind its border, with the button on top of the background
With the following code I am able to draw a similar button:
.container {
margin-top: 30px;
}
button {
font-size: 20px;
border: 2px solid black;
padding: 8px 20px;
position: relative;
}
.container .circle {
position: absolute;
top: -21px;
right: -21px;
width: 40px;
height: 40px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: #4da6ff;
}
<div class="container">
<button>Test Button
<span class="circle"></span>
</button>
</div>
RESULT:
The problem here is that the circle is on top of the button, but also on top of its border.

Answer 1

One idea is to integrate the missing borders inside the circle
.container {
margin-top: 30px;
}
button {
font-size: 20px;
border: 2px solid black;
padding: 8px 20px;
position: relative;
}
button:before {
content: "";
position: absolute;
top: -1px;
right: -1px;
transform:translate(50%,-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background:
linear-gradient(black,black) left /50% 2px,
linear-gradient(black,black) bottom/2px 50%,
#4da6ff;
background-repeat:no-repeat;
}
<div class="container">
<button>Test Button</button>
</div>
Or you can simply consider mix-blend-mode. You have to pay attention to the value used as it will depend on the combination of the colors. In this case, the suitable one is darken
.container {
margin-top: 30px;
}
button {
font-size: 20px;
border: 2px solid black;
padding: 8px 20px;
position: relative;
}
button:before {
content: "";
position: absolute;
top: -1px;
right: -1px;
transform:translate(50%,-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: #4da6ff;
mix-blend-mode:darken;
}
<div class="container">
<button>Test Button</button>
</div>
A third way more fancy with only backgrounds:
button {
font-size: 20px;
border:0 solid transparent;
border-top-width:24px;
border-right-width:24px;
padding: 8px 20px;
background:
linear-gradient(black,black) top /100% 2px,
linear-gradient(black,black) bottom/100% 2px,
linear-gradient(black,black) left /2px 100%,
linear-gradient(black,black) right /2px 100%,
radial-gradient(circle, #4da6ff 19px,transparent 20px) left bottom/200% 200% padding-box border-box,
#e2e2e6 padding-box;
background-repeat:no-repeat;
}
<div class="container">
<button>Test Button</button>
</div>
Another idea is to place the circle behind the element and cut the background:
.container {
margin-top: 30px;
position:relative;
z-index:0;
}
button {
font-size: 20px;
border: 2px solid black;
padding: 8px 20px;
position: relative;
background:radial-gradient(circle at top right,transparent 19px,#e2e2e6 20px);
}
button:before {
content: "";
position: absolute;
z-index:-1;
top: -1px;
right: -1px;
transform:translate(50%,-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background:#4da6ff;
}
<div class="container">
<button>Test Button</button>
</div>

Answer 2

Use a pseudo element (::after) to draw the border above the circle:
.container {
margin-top: 30px;
}
button {
position: relative;
font-size: 20px;
border: none;
padding: 8px 20px;
}
button::before {
position: absolute;
top: -20px;
right: -20px;
width: 40px;
height: 40px;
border-radius: 25px;
background: #4da6ff;
content: '';
}
button::after {
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
border: 2px solid black;
content: '';
}
<div class="container">
<button>Test Button</button>
</div>