CSS3 rounded corners for every browser? An alternative quick solution without headache
Here is a really nice post by Antonio Lupetti at http://woork.blogspot.com. Thanks for great post.
In the last weeks I frequently received a question about how to use CSS3 border-radius property to draw HTML elements with rounded corners in Internet Explorer. How you know CSS3 border-radius property is natively supported in Safari, Firefox and Chrome but for some mysterious reason this property is not supported in Internet Explorer.
So to draw rounded corners in IE you have to use some trick, for example using CSS classes with a background image (take a look at this post).
The simpler and quick solution I know to draw rounded corners in every browser is to use a mix of CSS3 and JavaScript. CurvyCorners is a free JavaScript library for creating gorgeous rounded corners for HTML elements. The final result looks like this:
The big advantage of this script is that lets render rounded borders in Safari, Chrome and Mozilla (which support rounded borders via -webkit-border-radius and -moz-border-radius) natively with CSS3 property and in IE and Opera with JavaScript.
The only thing you have to do is to include curvycorners.js into the <head> tag of your page:
Then you have to write a CSS class like this:
padding: 10px;
background-color: #DDEEF6;
border:1px solid #DDEEF6;
/* Do rounding (native in Safari, Firefox and Chrome) */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
At this point add the following code into the <head> of your page, after the previous CSS code:
function initCorners() {
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 },
antiAlias: true
}
curvyCorners(setting, ".roundedCorners");
}
</script>
tl, tr, bl, br are: top-left, top-right, bottom-left, bottom-right borders.
If you have different CSS classes (ex. roundedCorners, roundedCorners_1, roundedCorners_2) you can apply them changing the previous code in this way:
curvyCorners(setting, ".roundedCorners");
curvyCorners(setting, ".roundedCorners_1");
curvyCorners(setting, ".roundedCorners_2");
...
Now if you want to apply rounded corners to a DIV element use this code:
This is the result in every browser:
I think this is actually the simpler and quick solution to implement rounded corners in every browser. Ok... and what's if JavaScript is disabled? Sincerly I think this case is not so frequent... but if you don't want to use JavaScript, the most realiable solution is to use CSS classes with background images. Any suggestion about this topic? Please leave a comment, thanks!
Download the source code here:
Related Posts
You can also take a look at these posts I wrote some time ago about similar topics:
- Liquid styled input element with CSS
- Clean Tab Bar Digg-like using CSS
- Liquid expandable section with rounded corners using CSS
- Liquid layer with rounded corners using css
Tags: corner, CSS, Javascript, round
Previous Article
Share your views...
7 Respones to "CSS3 rounded corners for every browser? An alternative quick solution without headache"
Valuable thoughts and advices. I read your topic with great interest.
lúc 01:22 19 tháng 8, 2009
d5AmOp wquorsnabmrx, [url=http://brbhzxjrzagl.com/]brbhzxjrzagl[/url], [link=http://jdstiwcdobxc.com/]jdstiwcdobxc[/link], http://mjmztflmcdmr.com/
lúc 00:28 20 tháng 8, 2009
In truth, immediately i didn't understand the essence. But after re-reading all at once became clear.
lúc 19:28 20 tháng 8, 2009
@Floost: Thanks :)
@Crasty: It's really cool :P
lúc 01:29 21 tháng 8, 2009
I read a few topics. I respect your work and added blog to favorites.
lúc 20:17 21 tháng 8, 2009
В принципе и им и мне это будет выгодно, так как мне первый опыт и им не надо никого не искать.
Посему, расскажите мне как блондинке, что нужно для этого.
---------------------------------------------------------
Стоимость SEO-аудит сайта, Оптимизация.
Оптимизация, Редизайнинг сайта, Раскрутка.
lúc 12:14 22 tháng 8, 2009
@Cornelius: Thanks for loving my blog :)
@elytSaruaG: Please use English as a common language :) thanks.
lúc 07:06 23 tháng 8, 2009
Đăng nhận xét