How to show the text in the corner of border of a div?

Question

I want to show a text like below in the html page, how to do this?

This is what I tried up to now.

<div class="filterleft" style="display: inline-block;">
  <div id="filterleft_border" style="border-style:solid; border-width:1px;" >   
   <label class="category-label" for="category">Filter: </label>
   <input type="checkbox" id="enableFilter"/>
   <input type="search" id="filterValue" style="width: 50px"/>
  </div> 
</div>

I created a fiddle for this,

http://jsfiddle.net/KendoDev/kzf6257h/

But what I want is,

Answer 1

You'll have to use HTML <fieldset> and <legend> to make that work.Its really simpler to use it..See more about this in W3Schools

See the

fiddle

HTML

<div class="filterleft" style="display: inline-block;"> 
   <fieldset id="filterleft_border" style="border-style:solid; border-width:1px;" >
      <legend>Filter: </legend>
      <input type="checkbox" id="enableFilter"/>
      <input type="search" id="duration" style="width: 50px"/>
   </fieldset>
</div>

Answer 2

If you dont want to use fieldset use it like below.

.category-label
{
 position:absolute;
top:0px;
left:12px;
padding-left:3px;
padding-right:3px;
background:white;
}

DEMO

Answer 3

If you wanted it to be specifically the label that was positioned like the legend you could do:

http://jsfiddle.net/ahallicks/kzf6257h/5/

#filterleft_border {
    padding: 10px;
    position: relative;
}
.category-label {
    background: #FFF;
    left: 5px;
    position: absolute;
    top: -10px;
}

Note, the relative positioning will keep the label within the confines of the border in cae you needed to use it more than once.

Answer 4

It's a fieldset. I tried to change your code a little bit. Check it out.

  <div class="filterleft" style="display: inline-block;">
  <fieldset id="filterleft_border" style="border-style:solid; border-width:1px; border-radius:6px;" >   
   <legend style="font-family:Tahoma;font-size:11px;font-weight:bold">Filters: </legend>
   <input type="checkbox" id="enableFilter"/>
   <input type="search" id="duration" style="width: 150px"/>
  </fieldset> 
</div>

Here is the document in W3schools