CODEWITHSUNDEEP
javascriptjquerycsshtml
user569322
user569322

Reputation:

JQuery - Round only one corner?

I want to round one corner in JQuery. How would I do this? I tried:

   $(".under").corner("bottom-right 10px");

But that doesn't work. (Sorry if I'm asking noob questions, I just implemented JQuery today).

Upvotes: 0

Views: 502

Answers (3)

Vali
Vali

Reputation: 11

With jquery.corner.js (http://jquery.malsup.com/corner/) you can do this:

jQuery('#flow').corner("TL 8px");     // top left
jQuery('#flow').corner("TR 15px");    // top right
jQuery('#flow').corner("BL 20px");    // bottom left
jQuery('#flow').corner("BR 2px");     // bottom right
jQuery('#flow').corner("top 30px");   // top left right
jQuery('#flow').corner("right 2px");  // top bottom right
jQuery('#flow').corner("bottom 2px"); // bottom left right
jQuery('#flow').corner("left 2px");   // top bottom left

Upvotes: 1

ClarkeyBoy
ClarkeyBoy

Reputation: 5010

Try using something like http://jsfiddle.net/2mnHM/. You will need to adjust it a bit as it is not cross browser. From what I understand you can get the same effect using different properties in Chrome, Opera, Firefox, Safari and IE9; however IE8 and under is a whole different can of worms.

You will need to use a background image for IE, most likely. Or use a div positioned at the bottom left containing an <img> tag. You should be able to just use jQuery to detect if it is IE (a combination of $.browser.IE and $.browser.version).

Upvotes: 2

sscirrus
sscirrus

Reputation: 56729

For a CSS-based IE-compatible solution, check out:

http://css3pie.com/

For JQuery-based solutions, check out:

http://code.google.com/p/jquerycurvycorners/

http://www.curvycorners.net/

Upvotes: 2

Related Questions