Geek Answers Handbook

How to hide part of the CSS border beautifully

I am making a web application for the iPhone, I have problems with borders. To simplify things, I have a background image for the body, a rounded box in which there are some elements inside and a heading, and that where the problems start, since I want my heading to be on the top border of my box, not having borders beyond him.

Here is a screenshot: problematic box I do not see any solutions for its correct operation, do some of you guess? It would be very grateful

+4
source share
2 answers

From what I can put together, it looks like you should use the fieldset element (since you are grouping the form elements together), which also conveniently looks the way you want:

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

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

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

For a live example, see this demo of jsFiddle .

+3
source

Not sure if there is a simple css based solution.

A method that somewhat achieves what you want is to make the text shadow above the text floating above the border using a color that mixes with the overall background color. You can adjust the values ​​so that the border (at least basically) disappears behind the text. This, of course, will also lead to the disappearance of the background image, replacing it with the color of the shadow, but in any case it may seem pretty nice. (Having a more saturated background for text will make it easier to read).

0
source

More articles:


All Articles