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.
So IE and 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 rounded corners you have options including native
corners, 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 in IE or Opera (however it does degrade since all you
lose are rounded corners)
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 use corners in 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 square corners.
~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, in IE.
>
> Sam
>
> ................................................
>
> <html>
> <head>
> <title>Rounded corners</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 styles i.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
-~----------~----~----~----~------~----~------~--~---
