解决图片角落边框加载后出现细缝的问题

尝试给图片添加左上角与右下角的角落边框，完成后发现页面加载数秒后，角落边框处出现一道细缝（已加宽边框以便清晰展示）。

实现代码 #

HTML代码 #

<div class="picture">
    <img src="picture/MyPhoto.jpg" alt="My profile picture">
</div>

CSS代码 #

.picture {
    height: auto; 
    width: 35%; 
    position: relative;
    top: 200px;
    left: 55%;
    transform: translate(-30%, -30%);   
    animation: fadeIn 3s;    
}

.picture img {
    max-width: 50%;
    max-height: 50%;
    float: right;  
}

.picture::before,
.picture::after {
    content: '';
    position: absolute;
    z-index: -1;
    background-clip: padding-box; 
    box-sizing: border-box; 
}

.picture::before {
    top: -40px;
    left: 200px;
    border-width: 10px;
    border-style: solid;
    height: 150px;
    width: 150px;
    border-image: linear-gradient(to bottom right, #000AFF, #DB00FF 50%, transparent 50%) 1; 
}
.picture::after {
    bottom: -550px;
    right: -130px;
    border-width: 10px;
    border-style: solid;
    height: 150px;
    width: 150px;
    border-image: linear-gradient(to top left,  #000AFF, #DB00FF 50%, transparent 50%) 1;
}

已尝试调整渐变颜色、宽高等参数，但细缝问题仍未解决。

内容的提问来源于stack exchange，提问作者Vintoo