Curved corner border for a div

Question

Hi friends,

I need to build a div with curved corner border, with out using any images in the corner. Is it possible?

I dont want to insert curved images in the corner, Please help me regarding this.

Answer 1

http://www.curvycorners.net/

Try this library out, it did wonders for me! It is a tested cross browser solution.

Answer 2

You can use CSS in Safari and Firefox for this.

border-radius: 10px;

This is known as 'progressive enhancement'. IMO, this is better than images and or CSS tricks with margins and borders. Unless you absolutely must have images.

Answer 3

If you want to rely on webkit and mozilla browsers, you can use the following css commands:

.radius {
-moz-border-radius: 6px;
-webkit-border-radius:6px;
border-radius: 6px;
    }

Details can be viewed here.

info on the CSS2 spec border-radius can be found here

These unfortunately do not work for ie.

you could go a javascript route for IE only by using niftycube which has the added benefit of supporting column height leveling without problems.

Answer 4

Here's one I wrote that you're welcome to use if you like it. It renders a rounded-corner box of any dimensions with a background color but not a border around the entire box. It is for white page backgrounds, but that can be changed by editing the border color in the c1,c2 & c3 styles.

.rounded {background-color:#f1f0f1}
.rounded .inner {padding:8px 10px 8px 12px}
.rounded .c1 {height:1px;line-height:1px;font-size:1px;border-width: 0px 4px 0px 4px;border-color:#FFFFFF;border-style:solid;padding:0px}
.rounded .c2 {height:1px;line-height:1px;font-size:1px;display:block;border-width: 0px 2px 0px 2px;border-color:#FFFFFF;border-style:solid;padding:0px}
.rounded .c3 {height:2px;line-height:1px;font-size:1px;display:block;border-width: 0px 1px 0px 1px;border-color:#FFFFFF;border-style:solid;padding:0px}


   <div class="rounded" style="width:200px;height:100px">
    <div class="c1"></div><div class="c2"></div><div class="c3"></div>
     <div class="inner">
     -- Content Here --
     </div>
        <div class="c3"></div><div class="c2"></div><div class="c1"></div>
   </div>

Answer 5

I'd use a jQuery plugin to handle rounded corners. Here's the list of available rounded corner plugins on the jQuery site: http://plugins.jquery.com/taxonomy/term/189