How to create rounded corners using Jquery
1. Download Jquery.curveycorners.js from here.
2. Use Jquery and Jquery.curveycorners.js in the code to give rounded corners to a div. In the following code, I am giving roundness to #feature1.
<html>
<head>
<script type="text/javascript" src=" <script src="http://code.jquery.com/jquery-latest.js"></script>"></script>
<script type="text/javascript" src="js/jquery.curvycorners.packed.js"></script>
<script type="text/javascript"> $(document).ready(function(){
//Rounded Corners
$("#feature1").corner();
});
</script>
<style type="text/css" media="screen">
#feature1{
float: left;
height: 6em;
width: 14em;
min-height: 12em;
margin-right: 1.5em;
margin-bottom: 2em;
padding: 0 1em;
}
</style>
</head>
<body>This code would create rounded corners.
3. Note in the code above, we are given rounded corners around any html element that has id feature1.
This means following element would now have rounded corners:
<div id="feature1"> This is rounded corner. This is rounded corner. This is rounded corner. </div>
4) The rounded corners look like this:
Jquery rounded corners
This one work for me in IE7 but IE8's output is horrible. IE8 not showing my existing divs..;(
Post Comment