How to get transparent corner using jquery corner plugin
http://jquery.malsup.com/corner/
I tried but it fills in color in the corners
alt text http://stashbox.org/886089/11046214422-My-Desktop.png
instead of white, I want a transparent corner with opacity 0
.
a source to share
I recommend that you just use the CSS3 border-radius property. For browsers that don't support it, they'll have square corners. It's unfortunate, but it will save you a ton of trouble. I was looking at a lot of jQuery plugins with rounded corners a while ago and they all ended up breaking in some browsers one way or another. Using the CSS3 border radius is in line with the idea of progressive improvement and is easy to create and maintain.
a source to share
http://methvin.com/jquery/jq-corner.html
Define an explicit background color on the parent element. Safari requires the ancestor of the decorated element to have a background color. Just set the body to "background: #fff" if you don't need any other color.
Don't use a background image in the parent. The decorated element effect sets the pixels in the corners to the same color as the parent element. These pixels are not transparent and the background image that is used in the parent element will not appear.
a source to share
@metal I found a way ... Your back ground color appears to be red on the right! ..... If so, go to corner.js and search for #ffffff and replace it with red ...
find this line,
return '#ffffff';
and change to return '#ff0000';
EDIT:
I found this at forums.asp.net
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#test").corner();
});
</script>
</head>
<body style="background-color: red;">
<form id="form1" runat="server">
<div id="test" style="width: 250px; height: 250px;
background-color: white; opacity: 0.6;
filter: alpha(opacity=60)">
</div>
</form>
</body>
</html>
a source to share