Rounded Corners For Every Browser Using CSS3
Rounded corners can be achieved very simply in ever browser using a mix of CSS3 and JavaScript. Normally this is achieved in Internet Explorer using a mix of background images and CSS classes. CurvyCorners is a free JavaScript library for creating simple, yet beautiful rounded corners. The result looks like this:
The advantage to using this method is that it allows you to render rounded corners in Chrome, FireFox, and Safari using the CSS3 properties -webkit-border-radius and -moz-border-radius. While in Internet Explorer and Opera using the JavaScript alternative.
1. Include the JavaScript in your <head> tag.
<script type="text/javascript" src="curvycorners.js"></script>
2. Write a CSS class for roundedCorners.
.roundedCorners{
width: 220px;
padding: 10px;
background-color: #DDEEF6;
border:1px solid #DDEEF6;
/* Safari, FireFox, and Chrome */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
3. Load the JavaScript command.
<script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
var setting = {
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 },
antiAlias: true
}
curvyCorners(setting, ".roundedCorners");
}
</script>
4. Apply the CSS class to a <div>.
<div class="roundedCorners"> </div>
Comments on this post
Add a comment.
Social comments and analytics for this post…
This post was mentioned on Twitter by brandonpetty: Rounded Corners For Every Browser Using CSS3, http://brndnp.com/1…
October 25th, 2009 @ 10:12 AM