CSS Border Radius with jQuery Sliders
I just made a small DB-free web app that helps you to find the right snippet of code for border radius you can create with CSS3. The border radius properties basically create rounded corners. While there’re many ways to generate rounded corners with using graphics, it has been made easier for developers who can use the new CSS properties.
The problem with these properties is that implementation in browsers. Webkit-base browsers (e.g., Safari and Chrome) have a vendor specific property. Mozilla Firefox also has its own. As with any vendor specific properties, the property names start with -(minus sign) (e.g., -webkit- for Webkit and -moz- for Mozilla). Opera, unlike the browsers mentioned above the official CSS3 property.
IE doesn’t seem to work with these properties right now. But it doesn’t mean adding the properties causes a side effect. IE users just see the rectangular without any rounded corners. If you want to use the CSS border darius and want to target IE users, build a bearable design without rounded corners for IE users.
The upcoming version of IE, which is the version 9, is an exception. While it hasn’t been released to the public, IEBlog mentions the support of the CSS3 way instead of using a vendor specific property.
I am hoping everyone will remove the vendor specific properties and use the CSS3 version to make developers’ life easier.
The application is made by me, but the ideas are originally from CSS Border Radius and a suggestion from Dan Benjamin. If you are a developer, it’s worth reading his blog and some of his podcasts. I open-sourced the code on GitHub. Please take a look at the code and give me any suggestions.
