placing a circle on a picture I have in my css - html

Question

I'm trying to put a circle on the corner of a frame like the picture but only the part of the circle that's inside of the frame can be seen. The part that i marked with x is invisible.
How it looks:
How I want it to look:
My code:
.circle{
height: 150px;
width: 150px;
border-radius: 50%;
background: black;
line-height: 0;
position: absolute;
right:-20px; top:-2px;
z-index: 2;
}
.circle:after {
content: "";
display: block;
padding-bottom: 100%;
position: relative;
}
.circle-txt {
/* (E1) CENTER TEXT IN CIRCLE */
position: absolute;
bottom: 50%;
width: 100%;
text-align: center;
/* (E2) THE FONT - NOT REALLY IMPORTANT */
font-family: "font";
font-size:inherit;
}
:root{
--pic:"M510.295 108.139C571.169 177.774 609.697 279.36 589.662 365.38C570.398 451.399 492.572 521.854 409.352 555.443C326.132 589.031 236.748 586.574 162.775 548.889C88.8013 511.204 30.2391 438.292 8.66355 353.91C-12.1414 268.71 4.81077 171.22 56.438 104.043C107.295 36.8656 193.597 0 278.358 0C363.89 0.819237 448.651 38.5041 510.295 108.139Z"
}
.frame{
padding-right: 1px;
height: 579px;
width: 595px;
clip-path: path(var(--pic));
margin-left: 8%;
margin-bottom: 5%;
position: relative;
z-index: 1;
}
img{
height: 579px;
width: 595px;
}
<div class="frame">
<img src="1.png">
<div class="circle">
<div class="circle-txt">فریلنسینگ چیست؟</div>
</div>
</div>
I would appreciate if anyone can tell me what is that I'm doing wrong.

Answer 1

Check out my solution.
.circle {
height: 150px;
width: 150px;
border-radius: 50%;
background: black;
line-height: 0;
position: absolute;
right: 30px;
top: 38px;
z-index: 2;
}
.wrapp {
height: 579px;
width: 595px;
margin-left: 8%;
margin-bottom: 5%;
position: relative;
}
.frame {
clip-path: path(var(--pic));
}
img {
height: 579px;
width: 595px;
background: red;
}
.circle:after {
content: "";
display: block;
padding-bottom: 100%;
position: relative;
}
.circle-txt {
/* (E1) CENTER TEXT IN CIRCLE */
position: absolute;
bottom: 50%;
width: 100%;
text-align: center;
color:#fff;
/* (E2) THE FONT - NOT REALLY IMPORTANT */
font-family: "font";
font-size:inherit;
}
:root{
--pic:"M510.295 108.139C571.169 177.774 609.697 279.36 589.662 365.38C570.398 451.399 492.572 521.854 409.352 555.443C326.132 589.031 236.748 586.574 162.775 548.889C88.8013 511.204 30.2391 438.292 8.66355 353.91C-12.1414 268.71 4.81077 171.22 56.438 104.043C107.295 36.8656 193.597 0 278.358 0C363.89 0.819237 448.651 38.5041 510.295 108.139Z"
}
<div class="wrapp">
<div class="circle">
<div class="circle-txt">فریلنسینگ چیست؟</div>
</div>
<div class="frame">
<img src="1.png" />
</div>
</div>

Answer 2

From your description and images shared, it seems you maybe using border-radius around the entire set of elements, which is cutting off the smaller top right hand side circle.
Here is a solution you can use.
HTML:
<div class="circle-wrapper">
<div class="big-circle"></div>
<div class="little-circle"></div>
<div class="circle-wrapper">
CSS:
.circle-wrapper { position: relative; width: 24px; height: 24px; }
.big-circle { width: 24px; height: 24px; background: red; border-radius: 24px; }
.little-circle { position: absolute; width: 12px; height: 12px; background: blue; border-radius: 12px; top: -6px; right: -6px; }

Answer 3

Use border-radius to allow overflowing content to be seen, clip-path cuts it out ;) (or use it on img itself if that's good enough)
possible example.
.circle{
height: 150px;
width: 150px;
border-radius: 50%;
background: black;
line-height: 0;
position: absolute;
right:-20px; top:-2px;
z-index: 2;
}
.circle:after {
content: "";
display: block;
padding-bottom: 100%;
position: relative;
}
.circle-txt {
/* (E1) CENTER TEXT IN CIRCLE */
position: absolute;
bottom: 50%;
width: 100%;
text-align: center;
/* (E2) THE FONT - NOT REALLY IMPORTANT */
font-family: "font";
font-size:inherit;
color:hotpink;
}
:root{
--pic:"M510.295 108.139C571.169 177.774 609.697 279.36 589.662 365.38C570.398 451.399 492.572 521.854 409.352 555.443C326.132 589.031 236.748 586.574 162.775 548.889C88.8013 511.204 30.2391 438.292 8.66355 353.91C-12.1414 268.71 4.81077 171.22 56.438 104.043C107.295 36.8656 193.597 0 278.358 0C363.89 0.819237 448.651 38.5041 510.295 108.139Z"
}
.frame{
padding-right: 1px;
height: 579px;
width: 595px;
/*clip-path: path(var(--pic));*/
margin-left: 8%;
margin-bottom: 5%;
position: relative;
z-index: 1;
border-radius:50%;
border:solid;
}
img{
height: 579px;
width: 595px;
border-radius:50%;
background:hotpink;
}
<div class="frame">
<img src="1.png">
<div class="circle">
<div class="circle-txt"> فریلنسینگ چیست؟ </div>
</div>
</div>