How to hide a part of a CSS borderline nicely

i'm doing a web app for iPhone, i'm having some troubles with borders. To simplify things i have a background image for body, a box with rounded corners which have some e开发者_JAVA技巧lements inside and a title, and that's where problems begins as i want my title to be on the top border of my box without having the borderline behind it.

Here is a screenshot :

I can't see any solutions to render it properly, some of you have any guess ? It would be much appreciated

---

From what I can gather, it looks like you should be using the fieldset element (as you are "grouping" form elements together), which conveniently also looks the way you want it to:

<fieldset>
    <legend>Promoter</legend>
    <select>
        <option>Choose a promoter</option>
    </select>
</fieldset>

Styling is simple. Align the legend text and style the fieldset border using CSS:

fieldset {
    border: 1px solid black;
    border-radius: 5px;
}
legend {
    text-align: center;
}

For a live example, see this jsFiddle demo.

---

Not sure if there is a simple pure css based solution.

A method that somewhat achieves what you want is to have text shadow on the text floating above the border, using a color that blends with the general color of the background. You can tweak the values such that the border will (at least mostly) fade away behind the text. This will of course also fade away the background image, replacing it with the color of the shadow, but it might look fairly nice anyway. (Having a more solid background for the text will make it easier to read, too).