Create div with title header

Question

How would i create the below using pure CSS (no images, no tables, no javascript)?

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

What you want is not possible unless you dont really care about support in internet explorer.

http://www.the-art-of-web.com/css/border-radius/

Answer 3

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.

Answer 4

As Fabian said, you cannot do exactly what you want within Internet Explorer. If you still decide you want to create that without any images/javascript, I strongly suggest that you use some conditional statements - a surprising number of people still use Internet Explorer and I'm a little worried how that sort of solution would render in IE!

Best of luck - this was a really great question!