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:
<script type="text/javascript" src="curvycorners.js"></script>
Then you have to write a CSS class like this:
.roundedCorners{
width: 220px;
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;
}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:
<script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
</script>function initCorners() {
var setting = {
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 },
antiAlias: true
}
curvyCorners(setting, ".roundedCorners");
}
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 },
antiAlias: true
}
curvyCorners(setting, ".roundedCorners");
}
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");
...
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:
<div class="roundedCorners"> </div>
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:
No comments:
Post a Comment