Jacky Kong
Monday 6th July 2009
True Cross-Browser Rounded Corners
Achieving cross-browser rounded corners without image manipulation (ie6, ie7, ie8, FF, Safari, Opera, Google Chrome)
First, use both a CSS and a Javascript solution. The javascript method will rely on prototype (from http://www.prototypejs.org/), and provides support where there is no native browser facility.
Javascript:
Note: This can support all browsers, but the results are worse than that obtained via CSS
Download the scriptaculous-js-1.8.2 framework, here http://script.aculo.us/
<head>
<script type="text/javascript" src="scriptaculous-js-1.8.2/lib/prototype.js"></script>
<script type="text/javascript" src="scriptaculous-js-1.8.2/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="scriptaculous-js-1.8.2/src/corners.js"></script> <!-- download plug in here
http://malsup.com/jquery/corner/jquery.corner.js, DEMO: http://malsup.com/jquery/corner/ -->
</head>
Then add the plugin found here: 'http://malsup.com/jquery/corner/jquery.corner.js', which is not a standard scriptaculous-component, but requires the 'scriptaculous' framework to work.
Once all external JavaScript Frameworks as shown above are included, then you need to call your own javascript to make sure all required elements are supported and loaded before calling corners effect function.
The demonstration code at the bottom of the article shows simple browser detection which allows the CSS to override javascript where it is supported. It is possible to require all browsers to use Javascript, however the results are not as good.
CSS:
Note: This method does not support IE and Opera browsers, but it looks smoother than the javascript solution, especially when you have gradient background images.
<style type="text/css">
.box
{
background-color:#222;
height:100px;
width:100px;
-moz-border-radius:15px; /* for mozilla firefox */
-webkit-border-radius:15px; /* for safari, google chrome */
}
</style>
Change the size of corners as follows:
CSS:
* -moz-border-radius:15px;
* -webkit-border-radius:15px;
JavaScript
* new Effect.Corner(box,"15px");
Almost browsers could work properly as following demo:
Demo:
<html>
<head>
<title>Corner Demo</title>
<script type="text/javascript" src="http://yoursite.com/scriptaculous-js-1.8.2/lib/prototype.js"></script>
<script type="text/javascript" src="http://yoursite.com/scriptaculous-js-1.8.2/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://malsup.com/jquery/corner/jquery.corner.js"></script>
<style type="text/css">
.box {
background-color:#222;
height:100px;
width:100px;
-moz-border-radius:15px; /* for mozilla firefox */
-webkit-border-radius:15px; /* for safari, google chrome */
}
</style>
</head>
<body>
<div id="box" class="box"></div>
<script>
//browser detection
var browser=navigator.userAgent;
var browserversion=navigator.appVersion;
if (browser.indexOf('MSIE')!=-1 || browser.indexOf('Opera')!=-1)
{
window.setTimeout("IEDOMContentLoaded()", 0);
function IEDOMContentLoaded()
{
if(!(document.readyState==3))
{
domreadydo();
}
else
{
window.setTimeout("IEDOMContentLoaded()", 0);
}
}
function domreadydo()
{
var box = document.getElementById('box');
new Effect.Corner(box,"15px");
}
}
</script>
</body>
</html>
Rounded corners in Firefox/Safari/Google Chrome are shown as below:
Corner showns in Opera/IE6/IE7/IE8, made by JavaScript, are as follows:
Alloyfish
