使用border-image-source设置多个边框图片时仅显示一个的问题求助

我最近在做一个学校项目，需要给一个元素用border-image-source设置多张边框图片，但遇到了麻烦——每次只能显示其中一张，另一张完全不生效。如果同时启用两个边框图片的设置，元素就会显示成灰色边框（就像左边的效果）；但单独用其中一张的时候，中间和右边的正常效果都能出来，甚至我在浏览器调试工具里试着同时开启两个设置，结果还是不行。

下面是我用到的完整CSS类代码：

.calendar {
    height: 300px;
    width: 400px;
    margin: 0 auto;
    margin-top: 50px;
    background-image: url(calendarbg.png); 
    background-size: auto; 
    background-position: center;
    /* ^^ 这块应该和问题无关 ^^ */

    border-style: solid;
    border-image-source:  url(border1.png);
    /* border-image-source: url(border.png); */
    /* 后面的代码没贴全，但核心就是尝试设置两个border-image-source */
}

备注：内容来源于stack exchange，提问作者BBTBNWJDFOOTSYK