Monday, 15 March 2010

css - How to make buttons with rounded corner in IE 9? -



css - How to make buttons with rounded corner in IE 9? -

.button_style { color:#fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); background: #2faa51; background: -moz-linear-gradient(top, #2faa51 0%, #207337 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2faa51), color-stop(100%, #207337)); background: -webkit-linear-gradient(top, #2faa51 0%, #207337 100%); background: -o-linear-gradient(top, #2faa51 0%, #207337 100%); background: -ms-linear-gradient(top, #2faa51 0%, #207337 100%); background: linear-gradient(to bottom, #2faa51 0%, #207337 100%); filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#2faa51', endcolorstr='#207337', gradienttype=0 ); border:1px solid #178636; padding:0px 5px; white-space:nowrap; font-size:13px !important; line-height:20px; font-weight:bold; -webkit-border-top-left-radius:15px; -webkit-border-bottom-left-radius:15px; -webkit-border-bottom-right-radius:15px; behavior: url(images/ie-css3.htc); border-radius: 15px 15px 15px 15px; }

tried ie-css3 , above css, can find round corners carved(outlined) not rounded edges.edges still pointed corners.how create rounded corner button 4 sides.please help me this.

no prefix needed ie:

border-radius: 15px 15px 15px 15px;

with ie9, of import steps using border meta tag (in header):

<meta http-equiv="x-ua-compatible" content="ie=edge" />

"edge" means "use latest rendering engine" ie 9 utilize 9, 10 uses 10, etc.

and provide behavior hack:

behavior: url(images/ie-css3.htc);

css css3 internet-explorer-9

No comments:

Post a Comment