Create div with title header [closed]

Question

How would i create the below using pure CSS (no images, no tables, no javascript)? alt text http://img530.imageshack.us/img530/3209/divs.png

Answer 1

HTML:

<div class="box">
    <h2>Div Title</h2>
    <p>Div content.</p>
</div>

and the CSS:

.box {border:2px solid #0094ff;}
.box h2 {background:#0094ff;color:white;padding:10px;}
.box p {color:#333;padding:10px;}

Use CSS3 for border radius

.box {
    -moz-border-radius-topright:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}

The above code will work in firefox, safari, chrome, opera (10.5 +) etc

Now with bonus demo

Answer 2

HTML:

<div class="myDiv">
  <h2>Div Title</h2>
  <p>Div content.</p>
</div>

CSS:

.myDiv {
  border:2px solid #0094ff;
  -webkit-border-top-left-radius:6px;
  -webkit-border-top-right-radius:6px;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  width:300px;
  font-size:12pt; /* or whatever */
}
.myDiv h2 {
  padding:4px;
  color:#fff;
  margin:0;
  background-color:#0094ff;
  font-size:12pt; /* or whatever */
}
.myDiv p {
  padding:4px; 
}

Demo.