CODEWITHSUNDEEP
htmlcss
praveenjayapal
praveenjayapal

Reputation: 38529

Curved corner border for a div

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.

Upvotes: 10

Views: 49952

Answers (5)

alex
alex

Reputation: 490233

You can use CSS to achieve rounded corners in modern browsers...

border-radius: 10px;

Handy Generator

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 rounded corners.

Upvotes: 6

Jon Galloway
Jon Galloway

Reputation: 53125

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

Upvotes: -2

Sal
Sal

Reputation: 211

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>

Upvotes: 0

jimg
jimg

Reputation: 484

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.

Upvotes: 9

Dave
Dave

Reputation: 1569

http://www.curvycorners.net/

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

Upvotes: 7

Related Questions