Having trouble applying border images

Question

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...

Answer 1

As I understand your problem you want to set right and left borders to be one image and top and bottom borders to be another. I think you should use border-image property here. It gives you an ability to set custom borders on all sides by using 1 image containing all borders.

Your resulting code would look probably something like this:

border-image: url("border.png") 27;

Where url() - contains path to your image and 27 is the amount of pixels browser would offset to divide it into nine regions: four corners, four edges and a middle.

If it isn't sufficient check border-image-slice property

P.S. I myself never used it and don't know much about it so keep it in mind.