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
– esims, Commented Nov 7, 2016 at 0:42
Besides is there a way to get rid of the spam answer given by winding? (Edit: already gone) — esims
– esims, Commented Nov 7, 2016 at 0:43

Damian Bartosik · Accepted Answer · 2016-11-07 00:39:43Z

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 7, 2016 at 0:39

Damian Bartosik

5087 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

esims Over a year ago

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, 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.

Collectives™ on Stack Overflow

Masking with CSS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related