How to make round corner stretchable content box from 1 div ? see example image

Question

With only 1 <div> and for heading i will use <h2>

HTML code would be this.I only want to add one class or id to main div.

<div class="round">
  <h2> heading text </h2>
  <p> lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum</p>
  <a href="#"> Link text</a>
</div>

Any css or js solution? remember i want to use only one <div> for box. I need compatibility in all browsers.

Answer 1

http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml

Here is a great website which explains it very good.

Edit: the stretchability of your title-bar is quite hard: only a linear stretch (i.e. horizontal or vertical), with only 1-pixel image data looks good, since it can be repeated. But a complex shape, like in the picture, is a very difficult problem, and requires the usage of a stretchable image, which can look bad if stretched too much.

Try something easier first, and then add the titlebar glossy; if it doesn't work, you still have your basic, easier, version.

Answer 2

The nicest (pure CSS) solution I know would be to use the CSS effect added to http://jqueryui.com/demos/effect/default.html, which basically just uses the moz and webkit rounded corners attributes. This won't round the corners in IE though, but it depends on what you're aim is. Whether you want to use JS to accomplish it or just stick to CSS.

See http://www.schillmania.com/projects/dialog2/ for a JS way of doing it in all browsers.

Answer 3

Simple answer - to be completely cross browser compatible (and by that I mean "working in Internet Explorer") you can't do it with the markup restrictions specified (well, you can if you use javascript to alter the DOM on the fly).

If you ignore IE for the time being (which I find the best policy - you can add support for it afterwards with JS) you can use CSS3's border-radius property which has vendor-specific implementations in Webkit (Safari and Chrome), Mozilla (Firefox and its many offshoots) and now (finally) in Opera. So your markup and CSS would look something like:

Markup
<div class="round">
    <h2>Box Heading</h2>
    <p>Box content etc.</p>
</div>

CSS
.round {
    border-radius: 8px; /* or whatever radius you want */
    -moz-border-radius: 8px; /* vendor specific for mozilla */
    -webkit-border-radius: 8px; /* vendor specific for webkit browsers */
}

.round h2 {
    background: orange url(heading_back.png) repeat-y 0 0; /* etc */
}

Something along those lines should work in recent versions of the browsers already mentioned. Which leaves IE. Personally, I'd leave it at that and leave IE users to their own special square world view. But if it's necessary to support it, I'd use jQuery to insert some extra elements which you can then style. Off the top of my head, something like this should work:

js with jQuery library
$('.round').prepend('<div class="tl"></div><div class="tr"></div>');
$('.round').append('<div class="bl"></div><div class="br"></div>');

You'll then have top left / right and bottom left / right divs that you can apply transparent PNG corner images to in your stylesheet to give a mock rounded corner effect in IE. It's not ideal, but then neither is IE.

css for IE
.round { position: relative; }
.tl, .tr, .bl, .br { height: 7px; width: 7px; position: relative;}
.tl { float: left; background: transparent url(ie_tl.png) no-repeat top left; }
.tr { float: right; background: transparent url(ie_tr.png) no-repeat top right; }
.bl { float: left; background: transparent url(ie_bl.png) no-repeat top left; }
.br { float: right; background: transparent url(ie_br.png) no-repeat top right; }

You can then use CSS positioning to get these background images in the right position to form the "corners" of your rounded box.