CODEWITHSUNDEEP
htmlcssrounded-corners
xRobot
xRobot

Reputation: 26565

Rounder corners with CSS3 or with images?

What is the difference and the best way to create them right now ?

Upvotes: 6

Views: 292

Answers (4)

itsatony
itsatony

Reputation: 977

the jQuery plugin lc_roundz http://coffeelog.itsatony.com/?p=86 will do the job dynamically - even if you want the corners to be transparent (e.g. for use on complex backgrounds, ...). 

$("#image").lc_roundz({  
radius: 20,  // corner-radius  
newDadSelector: "", // jQuery style selector string to allow attachment anywhere in the DOM. empty string will inject the canvas next to the original  
newid: "%oid_after_lc_roundz",      // the new ID for the canvas object. %oid will be replaced with the id of the original object  
width: -1,                                                           // -1 uses the original image's width  
height: -1,                    // -1 uses the original image's width  
replace: false,                                          // boolean to decide whether the original should be removed from the DOM  
corner_color: [0,0,0,0]                     // this means TRANSPARENT ... R,G,B,alpha [0-255] each  
});

Upvotes: 0

Mika
Mika

Reputation: 1539

You can use the jQuery Plugin CurvyCorners

if you do not want to use css3

Upvotes: 1

Martijn
Martijn

Reputation: 606

CSS3, definitely. It's faster and cleaner and is supported on all major browsers. IE needs (suprise, suprise) a workaround though:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
behavior: url(border-radius.htc);

Upvotes: 5

Sarfraz
Sarfraz

Reputation: 382806

In simple words:

The rounded corners created with images should and work across all browsers.

And those created with CSS3 work in modern browsers but not the IE < 9.

What is the difference and the best way to create them right now ?

You should use CSS3's borer-radius propery along with vendor-specific prefixes for the modern browsers. To get rounded corners working in IE as well, you can use:

PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.

Here is an example of cross-browser rounded corners:

#myAwesomeElement {
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    behavior: url(path/to/PIE.htc);
}

Upvotes: 2

Related Questions