Pelo que entendi vc quer colocar a imagem dentro da borda, logo se a imagem for maior que a borda o que estiver sobrando fica cortado. Tipo quando o Pai tem overflow:hidden e o filho é maior que o pai, o que sobra fica escondido.
Fiz esse modelo que acho que deve te atender. Abaixo explico a técnica
body {
margin: 50px;
}
.mr90 {
width: 100px;
height: 100px;
border-radius: 20px;
position: absolute;
background-color: transparent;
box-shadow: 0 0 0 10px orangered;
z-index: -1;
}
.r90 {
width: 100px;
height: 100px;
border-radius: 20px;
overflow: hidden;
position: absolute;
}
.r90 img{
width: 200px;
height: 200px;
position: absolute;
top: -50px;
left: -50px;
}
.mr45 {
transform: rotate(45deg);
width: 100px;
height: 100px;
border-radius: 20px;
position: absolute;
background-color: transparent;
box-shadow: 0 0 0 10px orangered;
z-index: -1;
}
.r45 {
transform: rotate(45deg);
width: 100px;
height: 100px;
border-radius: 20px;
overflow: hidden;
position: absolute;
}
.r45 img{
width: 200px;
height: 200px;
border-radius: 20px;
position: absolute;
transform: rotate(-45deg);
top: -50px;
left: -50px;
}
<div class="r90">
<img src="http://fillmurray.com/g/200/200" alt="">
</div>
<div class="r45">
<img src="http://fillmurray.com/g/200/200" alt="">
</div>
<div class="mr90"></div>
<div class="mr45"></div>
O que eu fiz foi colocar 2 imagens de 200px em uma "mascara" de 100px, depois alinhei a imagem no centro de cada mascara, e rotacionei uma delas em 45deg. Depois fiz o mesmo processo com duas divs vazias por baixo das imagens, nessas divs eu fiz o boder com box-shadow