How to create round bordered gradient in html for DIV with support of java script?

Question

i have used filter to get the gradient and border-radius for round border but its not supporting in IE7, 8, 9

<style type="text/css">
div{
    width: 420px;
    height: 220px;
    border-radius: 12px;
    border: 11px solid #35b70e;
    background: -moz-linear-gradient(top, #fff, #ddd);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
    filter:     progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd);
}
</style>

For the correct usage of `filter` (gradients), see http://stackoverflow.com/a/7546655/938089. Can you give a clearer description of your issue? What exactely is "not working"? — Rob W, Jan 14 '12 at 11:32
round border for div works but the background gradient is not round corneredwhich come with filters — Srikanth Naidu, Jan 14 '12 at 11:46

score 1 · Accepted Answer · answered Jan 14 '12 at 11:30

1

You have to use some polyfills to get this working in IE 7 and IE 8 since it has no support for CSS3. Have a look at http://jquery.malsup.com/corner/ which is a jQuery plugin to create rounded corners.

In IE9 the border-radius: should work.

answered Jan 14 '12 at 11:30

Per Kastman

4,466
24
21

main problem is gradient background, round border will support but not with gradient filters? – Srikanth Naidu Jan 14 '12 at 11:36
round border for div works but the background gradient is not round corneredwhich come with filters – Srikanth Naidu Jan 14 '12 at 11:46

How to create round bordered gradient in html for DIV with support of java script?

1 Answers1