I'm currently working on a school project where I need to apply multiple border images to an element using border-image-source. However, I'm encountering issues where only one of the border images is displayed, while the other is not being applied. It would show up as a grey border instead if both of the borders are applied, as shown below (left). When I alternate between both borders, it appears as shown in the middle and right images. However, when I try to enable both in the inspect element, it doesn't work (right). helpme
Here's the full class code
// 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>
I tried simplifying the code, tried different images, issue still persists. I can't seem to have both two image sources running for some reason...