Which CSS tag creates a box like this with title?

Question

I want to create a box like this with title:

CSS box with title

Can any one please let me know if there is a default CSS tag to do this? Or do I need to create my custom style?

score 75 · Accepted Answer · edited Aug 06 '20 at 17:36

75

I believe you are looking for the fieldset HTML tag, which you can then style with CSS. E.g.,

    
    <fieldset style="border: 1px black solid">

      <legend style="border: 1px black solid;margin-left: 1em; padding: 0.2em 0.8em ">title</legend>

      Text within the box <br />
      Etc
    </fieldset>

edited Aug 06 '20 at 17:36

Nayan Srivastava

3,655
3
27
49

answered Sep 22 '08 at 07:42

Athena

3,130
1
19
17

you should copy this exact html code in your answer (in addition of your html source code already there). This code will be interpreted and displayed in this post, and that would show it is works exactly as advertised. I am not yet able to edit your post to do just that... – VonC Sep 22 '08 at 08:09
VonC, I tried doing that, but it stripped out all my HTML. Leaving just my text. – Athena Sep 22 '08 at 08:31
It only allows basic literal HTML so its probably that the fieldset tag is not allowed or something like that – Garry Shutler Sep 22 '08 at 09:17
12

its worth noting that fieldsets are to be used for forms only. – Buzz Sep 22 '08 at 12:19
1

@Buzz Why? What's the downside? – Flimm Jun 08 '21 at 14:01
@Flimm The same reasons one should not use `
– VGR Jul 05 '22 at 13:00
you need . "width: auto" title – onoffon Sep 01 '22 at 07:40

score 18 · Answer 2 · edited Aug 07 '20 at 09:28

If you are not using it in forms, and instead want to use it in an non-editable form, you can do this via the following code -

.title_box {
  border: #3c5a86 1px dotted;
}

.title_box #title {
  position: relative;
  top: -0.5em;
  margin-left: 1em;
  display: inline;
  background-color: white;
}

.title_box #content {}

<div class="title_box" id="bill_to">
  <div id="title">Bill To</div>
  <div id="content">
    Stuff goes here.<br> For example, a bill-to address
  </div>
</div>

score 6 · Answer 3 · edited Aug 07 '20 at 06:50

from http://www.pixy.cz/blogg/clanky/css-fieldsetandlabels.html

fieldset {
  border: 1px solid green
}

legend {
  padding: 0.2em 0.5em;
  border: 1px solid green;
  color: green;
  font-size: 90%;
  text-align: right;
}

<form>
  <fieldset>
    <legend>Subscription info</legend>
    <label for="name">Username:</label>
    <input type="text" name="name" id="name" />
    <br />
    <label for="mail">E-mail:</label>
    <input type="text" name="mail" id="mail" />
    <br />
    <label for="address">Address:</label>
    <input type="text" name="address" id="address" size="40" />
  </fieldset>
</form>

score 3 · Answer 4 · answered Sep 22 '08 at 07:44

3

This will give you what you want

<head>
    <title></title>
    <style type="text/css">
        legend {border:solid 1px;}
    </style>
</head>
<body>
    <fieldset>
        <legend>Test</legend>
        <br /><br />
    </fieldset>
</body>

answered Sep 22 '08 at 07:44

naspinski

34,020
36
111
167

score 2 · Answer 5 · answered Sep 22 '08 at 07:41

2

As far as I know (correct me if I'm wrong!), there isn't.

I'd recommend you to use a div with a negative-margin-h1 inside. Depending on the semantic structure of your document, you could also use a fieldset (HTML) with one legend (HTML) inside which approximately looks like this by default.

answered Sep 22 '08 at 07:41

Matthias Meid

12,455
7
45
79

Thanks, yes you are right! I was looking for fieldset/legend option. Thanks – Mozammel Sep 22 '08 at 07:44

score 1 · Answer 6 · edited Mar 24 '18 at 22:39

You can try this out.

<fieldset class="fldset-class">
    <legend class="legend-class">Your Personal Information</legend>

    <table>
        <tr>
            <td><label>Name</label></td>
            <td><input type='text' name='name'></td>
        </tr>
        <tr>
            <td><label>Address</label></td>
            <td><input type='text' name='Address'></td>
        </tr>
        <tr>
            <td><label>City</label></td>
            <td><input type='text' name='City'></td>
        </tr>
    </table>
</fieldset>

DEMO

score 1 · Answer 7 · edited Mar 24 '18 at 22:34

I think this example can also be useful to someone:

.fldset-class {
    border: 1px solid #0099dd;
    margin: 3pt;
    border-top: 15px solid #0099dd
}

.legend-class {
    color: #0099dd;
}

<fieldset class="fldset-class">
    <legend class="legend-class">Your Personal Information</legend>

    <table>
        <tr>
            <td><label>Name</label></td>
            <td><input type='text' name='name'></td>
        </tr>
        <tr>
            <td><label>Address</label></td>
            <td><input type='text' name='Address'></td>
        </tr>
        <tr>
            <td><label>City</label></td>
            <td><input type='text' name='City'></td>
        </tr>
    </table>
</fieldset>

Which CSS tag creates a box like this with title?

7 Answers7

Linked