Which CSS tag creates a box like this with title?

Mozammel_20165 0
Viewed 69838

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?

legend fieldset css html
7 Answers

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>

Athena_178460

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>

user_22400

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>
naspinski_147770

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.

Mudu_177130
Related