Question

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

Answer 1

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.