Which CSS tag creates a box like this with title?

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?

Solution 1:

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>

Solution 2:

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>

Which CSS tag creates a box like this with title?

Solution 1:

Solution 2:

Related

Recent Posts