I found a useful plugin created by Johan Fox to create rounded corners with ease. The output looked consistent in most of the latest browsers I tested it on. You can download the plugin over here. Here’s how to use this plugin in your applications:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>Cornerz Plugin</title>
<script language="javascript" type="text/javascript"
src="http://code.jquery.com/jquery-latest.js">
</script>
<script language="javascript" type="text/javascript"
src="http://github.com/weepy/cornerz/raw/master/cornerz.js">
</script>
<style type="text/css">
.cordiv{
height: 200px;
width: 200px;
background-color:Blue;
}
</style>
<script type="text/javascript">
$(function() {
$('#divOne').cornerz();
$('#divTwo').cornerz({
radius: 45
});
});
</script>
</head>
<body>
<form id="form1">
<div>
<div id="divOne" class="cordiv">
</div>
<br /><br /><br />
<div id="divTwo" class="cordiv">
</div>
</div>
</form>
</body>
</html>
OUTPUT
See a Live Demo
Note: You may experience a lag before the corners are shown. To avoid the lag, download the cornerz plugin on your local machine and then reference it from there.
Giving me +1 tells me you liked this article! Thanks in advance
Did you like this post?
|
|
||
|
|
|
Save on Delicious |
|
subscribe via rss |
|
subscribe via e-mail |
|
print this post |
|
follow me on twitter |
About The Author
comments
5 Responses to "Rounded Corners with the Cornerz jQuery plugin"this is just awesome
Positioning is off in IE7. Box content is shifted to the right.
the demo doesnt seem to work. why is the script not documented at all?? wow.
i can't see the visual verification code?
FU - k!
I just cross checked the demo on IE8 as well as Firefox. Works just fine!
how can only top-right and top-left side corner
Post a Comment