CSS Multi line rounded Header

Question

I am trying to create a rounded header that could possible be multiple lines. My problem is that the left and right images start to repeat themselves if the text needs to go on another line.

Edit If you need the images: http://www.filedropper.com/corners

CSS

.Label
{
    color:White;
}

.Left
{
    background:url('images/tab_left.png') repeat-y;
    height:auto;
    width:12px;
}

.Middle
{
    width:200px;
    height:auto;
    background:url('images/tab_mid.png');
    font-weight:lighter;
    background-repeat:repeat-x;
    color:White;
    vertical-align:middle;
    padding-top:1px;
    text-align:center;
}

.Right
{
    background:url('images/tab_right.png') repeat-y;
    height:auto;
    width:12px;
}

HTML

<table style="height:auto;" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td class="Left"></td>
        <td class="Middle"><asp:Label runat="server" ID="Label1" Text="Label1" CssClass="Label" /></td>
        <td class="Right"></td>
    </tr>
</table>

Answer 1

The images that you provided are for one-line only. If you want it to go multiple lines, you will have to do some extra work. Also the images have a gradient, so it will not be possible to use them for multiple lines.

On the other hand, JQuery offers a much simpler solution for rounded corners. A lot less pain and flexible.

Tutorials:Rounded Corners