Add Text on Border - html

Question

So I have an image and some text inside a border. I'm trying to have a word on the border itself and I can't seem to find a way of doing it.
my HTML
<div class="img">
<img src="https://imagizer.imageshack.us/v2/321x396q90/661/oUF8n3.jpg" align="left" height=400px width=400px alt="sliced">
<div class="text">
Calibre: From 1 up to 5 mm <br>
Packing: jute or polypropylene bags , Vacuum & Carton <br>
Usage areas: It is used as the raw material for processed and fully processed hazelnuts, etc. <br>
</div>
<h2> Sliced </h2>
</div>
CSS
.img {
float: left;
border-style: solid;
border-width: 2px;
border-color: 24AB36;
padding: 20px;
}
I want the header 2 to be on the border.
How do I do this ?

Answer 1

if you want a text on the border ,you can use fieldset
SEE DEMO
<fieldset>
<legend>Title Text</legend>
CONTENT HERE
</fieldset>
Html:
<fieldset class="field_set">
<legend style="text-align: center;"><h2>Sliced</h2></legend>
<div class="img">
<img src="https://imagizer.imageshack.us/v2/321x396q90/661/oUF8n3.jpg" align="left" height=400px width=400px alt="sliced">
<div class="text">
Calibre: From 1 up to 5 mm <br>
Packing: jute or polypropylene bags , Vacuum & Carton <br>
Usage areas: It is used as the raw material for processed and fully processed hazelnuts, etc. <br>
</div>
</div>
</fieldset>
CSS:
.img {
float: left;
padding: 20px;
}
.field_set{
border-width:6px;
border-color:#F00;
border-style: solid;
}

Answer 2

I can't see how the text could fit into your div's 2px border, so I assume you mean the padding.
In that case, set .img's position to relative, set h2's position to absolute, and use some guesswork to manoeuvre it into the padding using top and left properties.
http://jsfiddle.net/prashanthcr/p2zmc4o5/1/
.img {
<other properties omitted for brevity>
position: relative;
}
h2 {
position: absolute;
top: 395px;
left: 180px;
}

Answer 3

Fieldset may work, but the fieldset tag is usually used within a form to group controls/input elements, like a group of checkboxes.
It may be a little more semantically correct to just style and position your h2 like so:
body {
padding: 20px;
}
.img {
float: left;
border-style: solid;
border-width: 2px;
border-color: 24AB36;
padding: 20px;
position: relative;
}
.img h2 {
position: absolute;
background: white;
top: -1.65em;
}
<div class="img">
<h2> Sliced </h2>
<img src="https://imagizer.imageshack.us/v2/321x396q90/661/oUF8n3.jpg" align="left" height=400px width=400px alt="sliced">
<div class="text">
Calibre: From 1 up to 5 mm
<br>Packing: jute or polypropylene bags , Vacuum & Carton
<br>Usage areas: It is used as the raw material for processed and fully processed hazelnuts, etc.
<br>
</div>
</div>
Or if you're not as concerned about, semantics you could use a pseudo element like so:
.img::before {
content: "Sliced";
font-size: 2em;
position: absolute;
background: white;
top: -0.75em;
left: 0.75em;
}
body {
padding: 20px;
}
.img {
float: left;
border-style: solid;
border-width: 2px;
border-color: 24AB36;
padding: 20px;
position: relative;
}
.img::before {
content: "Sliced";
font-size: 2em;
position: absolute;
background: white;
top: -0.75em;
left: 0.75em;
}
<div class="img">
<img src="https://imagizer.imageshack.us/v2/321x396q90/661/oUF8n3.jpg" align="left" height=400px width=400px alt="sliced">
<div class="text">
Calibre: From 1 up to 5 mm
<br>Packing: jute or polypropylene bags , Vacuum & Carton
<br>Usage areas: It is used as the raw material for processed and fully processed hazelnuts, etc.
<br>
</div>
</div>