How to bound images with border-image?

Question

I'm using the Jssor Slider in "Different Size Images Slider" scenario. I want to add a border-image (wooden frame for paintings) to each image.
all the images take the correct width & height (including the border size + image size), but none of container Divs takes the correct dimensions and therefore bottom of image will always be truncated..!

How can i add the hidden height to container Divs?

<style>
    #slider {
        text-align: center;
        margin: 0 auto;
        width: 100%;
        max-width: 980px;
        padding: 0;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    #sld {
        padding-top: 10px;
        padding-bottom: 10px;
    }

        #sld img {
            border: 20px solid #f4be52;
            border-image-source: url('http://codeitdown.com/samples/wooden_frame.jpg');
            border-image-slice: 50 65;
        }
</style>

<section id="slider">
    <div id="sld" style="position: relative; top: 0; left: 0; width: 600px; height: 500px; margin: 0 auto; display: block; overflow: hidden;">
        <!-- Loading Screen -->
        <div data-u="loading" style="position: absolute; top: 0; left: 0;">
            <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; background-color: #000; top: 0; left: 0; width: 100%; height: 100%;">
            </div>
            <div style="position: absolute; display: block; background: url(/images/loading2.gif) no-repeat center center; top: 0; left: 0; width: 100%; height: 100%;">
            </div>
        </div>
        <!-- Slides Container -->
        <div data-u="slides" id="divSlides" style="cursor: move; position: absolute; overflow: hidden; width: 600px; height: 500px; left: 0; top: 0;">
            <div>
                <a u="image" href="#">
                    <img src="../paint/03.jpg" /></a>
            </div>
            <div>
                <a u="image" href="#">
                    <img src="../paint/01.jpg" /></a>
            </div>
            <div>
                <a u="image" href="#">
                    <img src="../paint/07.jpg" /></a>
            </div>
        </div>
    </div>
</section>

<script type="text/javascript">
        (function ($) {
            var options = { $AutoPlay: false, $FillMode: 1 };
            var sld1 = new $JssorSlider$('sld', options);
            function ScaleSlider() {
                var parentWidth = sld1.$Elmt.parentNode.clientWidth;
                if (parentWidth)
                    sld1.$ScaleWidth(Math.min(parentWidth, 600));
                else
                    window.setTimeout(ScaleSlider, 30);
            }
            ScaleSlider();

            $(window).bind("load", ScaleSlider);
            $(window).bind("resize", ScaleSlider);
            $(window).bind("orientationchange", ScaleSlider);
        })(jQuery);
</script>

Answer 1

Please remove the following lines

#sld {
    padding-top: 10px;
    padding-bottom: 10px;
}

And add box-sizing as below

#sld img {
    border: 20px solid #f4be52;
    border-image-source: url('http://codeitdown.com/samples/wooden_frame.jpg');
    border-image-slice: 50 65;
    box-sizing: border-box;
}