Masking with CSS

Question

I have a webpage with a box and want to place a text label over the border of the box, and hide the border underneath. Right now I am doing it like this:

http://www.esims.nl/test/aspnet/2016_11_stackoverflow/

I wonder if there is a better way, like masking or something. Since I am using different div's with background images, instead of CSS3.

Update: the fieldset seemed just what I asked for, but unfortunately it doesn't work well in IE11 with rounded borders. Unless anyone knows a good fix for this, I cannot use the fieldset, and will continue with my own fieldset lookalike solution (the example above).

The expected result is the example I already gave. But I wonder If I can do it with CSS3 border-radius, less div's and less background images. — esims, Nov 07 '16 at 00:42
Besides is there a way to get rid of the spam answer given by winding? (Edit: already gone) — esims, Nov 07 '16 at 00:43

score 3 · Accepted Answer · answered Nov 07 '16 at 00:39

3

It's simply, there's a HTML tag for that called fieldset

<div class="wrapper">
  <fieldset>
  <legend>Label of the box:</legend>
    Content
  </fieldset>
</div>

You can read more about it here:

http://www.w3schools.com/tags/tag_fieldset.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

answered Nov 07 '16 at 00:39

Damian Bartosik

498
6
24

I didn't know about the fieldset. Unfortunately, it doesn't work well in IE11 with rounded borders. I have seen some 'solutions' for this, for example [here](http://stackoverflow.com/questions/940191/rounded-corners-on-a-fieldset/17406564#17406564), but they do not hide the border underneath the legend, or hide the border with a solid white background, which is not suitable on a background image, like the example I gave above. – esims Nov 18 '16 at 19:06

Masking with CSS

1 Answers1