Helping IE support Border Radius :

http://gist.github.com/77516



On 11 Mar, 14:27, Sam Dutton <[email protected]> wrote:
> yes please
>
> On Tue, Mar 10, 2009 at 9:27 PM, weepy <[email protected]> wrote:
>
> > I have a simple jquery plugin that provides an implementation for
> > border radius for ie and just uses native rendering for firefox/
> > webkit.
>
> > no luck with opera, but personally I don't care that much about that
> > since it's so low penetration.
>
> > Let me know if your interested in it.
>
> > On 10 Mar, 17:42, WildStrawberry <[email protected]> wrote:
> > > Have you tried DD_roundies fromhttp://
> >www.dillerdesign.com/experiment/DD_roundies/?
> >  > It helps in IE, but Opera is still the problem.
>
> > > Grzegorz G. (www.wild-strawberry.eu)
>
> > > On 26 Lut, 00:05, Daniel Friesen <[email protected]> wrote:
>
> > > > It might be a personal taste, but I prefer (for future compatibility):
>
> > > >  border-radius: 20px;
> > > >  -moz-border-radius: 20px;
> > > >  -webkit-border-radius: 20px;
>
> > > > border-radius is actually a w3 draft already.
>
> > > > But yes, redefining what you said a little, only Gekko and WebKit
> > > > support borderRadius, Presto and Trident don't.
> > > > SoIEand Opera won't support it. But Firefox, Safari, Chrome, and the
> > > > long list of Gekko and WebKit based browsers as well as things like AIR
> > > > will.
>
> > > > When it comes to roundedcornersyou have options including
> > nativecorners, images, or a collection of divs.
> > > > I suggest comparing your options and deciding on what option fits your
> > > > case best.
>
> > > > Native radius:
> > > > Pro: Most flexible
> > > > Pro: Cleaner to implement
> > > > Pro: Most easy to use
> > > > Con: Doesn't work inIEor Opera (however it does degrade since all you
> > > > lose are roundedcorners)
>
> > > > Images:
> > > > Pro: Works in all browsers (though you may have to deal with
> > > > transparency issues in IE6 depending on your image)
> > > > Pro: You still get the style of curve you want
> > > > Pro: You can do something fancy beyond a normal curve (though, that's
> > > > getting off track from the purpose here)
> > > > Con: Least flexibility in dynamic stuff (you're using static images so
> > > > you lose the ability to change colors and anything else right from css)
>
> > > > Injected elements:
> > > > Pro: Works in all browsers
> > > > Pro: A little more flexible than images
> > > > Con: Clutters your DOM with unnecessary nodes (this can sometimes
> > > > conflict with your style rules; potential for things getting slower if
> > > > you use it to often?)
> > > > Con: No anti-aliasing or any type of effect, so your curves can look
> > > > fairly ugly sometimes.
>
> > > > Personally most of the time I usecornersin a situation where it's just
> > > > an extra fancy part of the style, but not essential. So I use native
> > > > radius and let the people on other browsers suffer with squarecorners.
>
> > > > ~Daniel Friesen (Dantman, Nadir-Seen-Fire)
>
> > > > Sam Dutton wrote:
> > > > > Sounds like you're not looking for a CSS solution, but the example
> > > > > below works in Safari and Firefox (at least) though not, of course,
> > inIE.
>
> > > > > Sam
>
> > > > > ................................................
>
> > > > > <html>
> > > > > <head>
> > > > > <title>Roundedcorners</title>
> > > > > <style type="text/css">
> > > > > div.roundedCorners {
> > > > >  background: gray;
> > > > >  border: 20px solid #FFCC00;
> > > > >  border-radius: 100px;
> > > > >  height: 100px;
> > > > >  margin: 100px auto 0 auto;
> > > > >  -moz-border-radius: 100px;
> > > > >  -webkit-border-radius: 20px;
> > > > >  width: 200px;
> > > > > }
> > > > > </style>
> > > > > </head>
> > > > > <body>
> > > > >  <div class="roundedCorners"></div>
> > > > > </body>
> > > > > </html>
>
> > > > > On Wed, Feb 25, 2009 at 6:57 PM, weepy <[email protected]> wrote:
>
> > > > >> Try this :
>
> > > > >>http://labs.parkerfox.co.uk/cornerz/
>
> > > > >> On 25 Feb, 04:57, vikram <[email protected]> wrote:
>
> > > > >>> hi
>
> > > > >>> I am new to JQuery, i am trying to get a rounded corner for div, i
> > had
> > > > >>> used the canvas rounded corner, but i find some issues with it.
>
> > > > >>> Is there any other js file which can give a rounded corner and also
> > > > >>> which take the stylesi.e.background, border color, radius, etc
>
> > > > >>> for example:
>
> > > > >>> $("#testDiv").corners( radius: 5, border-color: red,
> > background-color:
> > > > >>> blue, border size: 1 )
>
> > > > >>> Appreciate ur help in advance.
>
> > > > >>> Regards
> > > > >>> Vikram.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"jQuery Development" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to 
[email protected]
For more options, visit this group at 
http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to