How to slice an Image Border for use in CSS?

i am trying to get an image border sliced for us开发者_如何转开发e in css.

Here is the Box borders i want to use:

Here is part of the code for the Box:

  <div class="wrapper">
            <div id="featured_box1">
                <div class="Content1">
                    <h2>Heading</h2>
                    <p>Content for Featured Box</p>
                </div>
            </div>               
</div>

How should i slice the images, should i slive a small area and then repeat-y for each side. and then create 4 new divs to insert the corners of the border ?

So how to handle the corners of the borders ?

Which is the best way to get the box displayed with fasting loading speed?

@thirtydot, The box width is fixed, both width and height. How do I use 4 corners with divs ? – Ibn Saeed

Maybe I'm missing something, but if the box is a fixed size, can't you just set the width and height of your div to the exact dimensions, and set it as a background-image?

Like this: http://jsfiddle.net/7DgNg/