Возникли проблемы с применением изображений границ

В настоящее время я работаю над школьным проектом, в котором мне нужно применить несколько изображений границ к элементу, используя источник изображения границы. Однако я сталкиваюсь с проблемами, когда отображается только одно из изображений границы, а другое не применяется. Вместо этого она будет отображаться в виде серой рамки, если будут применены обе границы, как показано ниже (слева). Когда я чередую обе границы, они выглядят так, как показано на среднем и правом изображениях. Однако, когда я пытаюсь включить оба элемента проверки, это не работает (справа). помогите мне

Вот полный код класса

// CSS
.calendar {
    height: 300px;
    width: 400px;
    margin: 0 auto;
    margin-top: 50px;
    background-image: url(calendarbg.png); 
    background-size: auto; 
    background-position: center;
    /* ^^ not relevant, i guess ^^ */

    border-style: solid;
    border-image-source:  url(border1.png);
    /* border-image-source: url(border.png); */
    border-image-slice: 30 fill;
    border-width: 20px;
}
// HTML 
<table class = "calendar">
        <thead> 
            <tr>
            <th colspan = "7" class = "mHeader"> January </th>
            </tr>
                <tr>
                    <th>Sun</th>
                    <th>Mon</th>
                    <th>Tue</th>
                    <th>Wed</th>
                    <th>Thu</th>
                    <th>Fri</th>
                    <th>Sat</th>
                </tr>
            </thead>
 <tbody>
        <tr>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
        </tr>
        <tr>
            <td>14</td>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td>18</td>
            <td>19</td>
            <td>20</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
            <td>26</td>
            <td>27</td>
        </tr>
        <tr>
            <td>28</td>
            <td>29</td>
            <td>30</td>
            <td>31</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        </tbody>
    </table>

Я пробовал упростить код, пробовал разные изображения, проблема все еще сохраняется. По какой-то причине у меня не работают оба источника изображений...