What is the second best possible way to make this Content Box's (Fixed width) corners round (without border-radius and javascript)?

Question

Is it possible to make this box's corner round with same html tags. without using any other tag and border-radius property and javascript. but i can use css classes and background images. and box height should be depend on content of <p>grr</p>

Width of Box and height of <h2> is fixed , but I need height of content flexible.

<h2>Nulla Facilisi</h2>
<p>
   Phasellus at turpis lacus. Nulla hendrerit lobortis nibh. 
   In lectus erat, blandit non feugiat vel, accumsan ac dolor. 
   Etiam et ligula vel tortor tempus vehicula porttitor ut ligula. 
   Mauris felis odio, fermentum vel
</p>

Edit : What is the best possible way to achieve this without css border-radius property which is not supported by internet explorer?

Answer 1

You can put a background in the H2, which is like 10px in height and the fixed width that has the top corners positioned top.

Then in the p tag place the opposite image positioned bottom.

Something like:

<h2 style=background-image: url(''); background-repeat: no-repeat; background-position: 0 0;">Nulla Facilisi</h2>
<p style=background-image: url(''); background-repeat: no-repeat; background-position: 100% 0;">
   Phasellus at turpis lacus. Nulla hendrerit lobortis nibh. 
   In lectus erat, blandit non feugiat vel, accumsan ac dolor. 
   Etiam et ligula vel tortor tempus vehicula porttitor ut ligula. 
   Mauris felis odio, fermentum vel
</p>

Answer 2

Karate Corners

Basically, you have an image that represents the corners, then you place them using position:absolute; and background-position. The only downside is that you need a special case for IE6 (since it doesn't like transparent pngs) and you have to add 4 extras <div>s for each box, but it works really well and isn't that complicated.

Here's my code for 5 px corners, using a 10x10 image of a circle:

CSS:

.round{
    position:relative;
}

.round .corner{
    background: url('corners.png') no-repeat;
    position:absolute;
    width:5px;
    height:5px;
    font-size:0%;
}
.round .tl{
    top: 0px;
    left: 0px;
    background-position: 0 0;
}
.round .tr{
    top: 0px;
    right: 0px;
    background-position: -5px 0;
}
.round .bl{
    bottom: 0px;
    left: 0px;
    background-position: 0 -5px;
}
.round .br{
    bottom: 0px;
    right: 0px;
    background-position: -5px -5px;
}

HTML:

<div class="round">
  <p>Content goes here</p>
  <div class="corner tl"></div>
  <div class="corner tr"></div>
  <div class="corner bl"></div>
  <div class="corner br"></div>
</div>

Answer 3

Try this post otherwise: http://dimox.net/cross-browser-border-radius-rounded-corners/ (not mine)

Or the jQuery plugin for rounded corners: http://plugins.jquery.com/project/corners

Answer 4

Read Rounded Corners Roundup and pick a solution that best fits your needs.

Answer 5

If the box is a set width you can use a top and bottom image to create the effect. Otherwise you will need javascript and/or CSS that isn't fully supported yet (or at all in IE6/7).

Answer 6

You know you can use a htc hack to get border-radius support in IE

border-radius.htc from Google Code

I haven't used it myself yet but it's supposedly supported in IE6, 7, and 8. So the following should cover everything.

.rounded {
-webkit-border-radius: 9px;  /* safari-chrome */ 
 -moz-border-radius: 9px;   /* firefox */ 
 border-radius: 9px;  /* opera */ 
 behaviour:url(border-radius.htc); /* IE hack */ 
 }