CSS3 for HTML5 Legend inside fieldset

html css gradient fieldset
Pawan Mude picture Pawan Mude · Nov 4, 2013 · Viewed 65.4k times · Source

Can you please suggest CSS to get effect as quoted below (using CSS3 gradient & borders) ?

enter image description here

Current version of HTML is mentioned below: 

<section style="margin: 10px;">
<fieldset style="border-radius: 5px; padding: 5px; min-height:150px;">
<legend><b> My Statistics </b> </legend>
<label> <br/> </label>
<label> <br/> </label>
</fieldset>

Answer

darthmaim picture darthmaim · Nov 4, 2013 

fieldset {
    font-family: sans-serif;
    border: 5px solid #1F497D;
    background: #ddd;
    border-radius: 5px;
    padding: 15px;
}

fieldset legend {
    background: #1F497D;
    color: #fff;
    padding: 5px 10px ;
    font-size: 32px;
    border-radius: 5px;
    box-shadow: 0 0 0 5px #ddd;
    margin-left: 20px;
}
<section style="margin: 10px;">
<fieldset style="min-height:100px;">
<legend><b> My Statistics </b> </legend>
<label> <br/> </label>
<label> <br/> </label>
</fieldset>

(http://jsfiddle.net/ESkRt/1/)

Related questions

Use css gradient over background image

I've been trying to use a linear gradient on top of my background image in order to get a fading effect on the bottom of my background from black to transparent but can't seem to be able to make it …

Read More
Gradient colors in Internet Explorer

I know that Internet Explorer has some proprietary extensions so that you can do things like create divs with a gradient background. I can't remember the element name or it's usage. Does anyone have some examples or links?

Read More
How to make a pure CSS div with a gradient background?

Let's say the height of the div is 34px and the width is 480px. The div should look like this: and I don't want it to actually use an image, just CSS. Is it possible?

Read More