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.
Tweet
About The Author
6 comments:
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
Its giving error on IE10 with document mode Standard
Post a Comment