59

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?

Improve this question
0

7 Answers 7

Reset to default
77

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>

Improve this answer
8
  • 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
    Commented Sep 22, 2008 at 8:09
  • VonC, I tried doing that, but it stripped out all my HTML. Leaving just my text.
    – Athena
    Commented Sep 22, 2008 at 8:31
  • It only allows basic literal HTML so its probably that the fieldset tag is not allowed or something like that
    – Garry Shutler
    Commented Sep 22, 2008 at 9:17
  • 12
    its worth noting that fieldsets are to be used for forms only.
    – Buzz
    Commented Sep 22, 2008 at 12:19
  • 1
    @Buzz Why? What's the downside?
    – Flimm
    Commented Jun 8, 2021 at 14:01
20

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>

Improve this answer
6

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>

Improve this answer
4

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>
Improve this answer
1
  • 1
    This should be the accepted answer. Better than any CSS hacks
    – Ste
    Commented Apr 4 at 11:48
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.

Improve this answer
1
  • Thanks, yes you are right! I was looking for fieldset/legend option. Thanks
    – Mozammel
    Commented Sep 22, 2008 at 7:44
2

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>

Improve this answer
1

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

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.