border-radius in IE-9 doesn’t work!!

Question

0.00/5 (No votes)

See more:

, +

&Hey everybody
This is my CSS-code for a button.
I use by the way Razor Engine in ASP.NET/C#.

It work in Safari and other web browsers except as IE-9
I read everywhere that IE-9 support ‘border-radius’. But it doesn’t work for me!!!

CSS

input[type="submit"] {
  border: 0px;
  margin: 5px 0px;
  padding: 0px 5px;
  color:White;
  height:20px;
  display: inline-table;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  text-decoration:none;
  background: url(images/icon-button-middle.png) repeat-x;
  font-family: Calibri, Arial;
  font-size: 12px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 20px;
  border-radius: 3px;
  position:relative;
}

I thought maybe I can find content="IE=edge" in <meta http-equiv="X-UA-Compatible" content="IE=edge" />
and change it to content="IE=9", but I couldn’t find it in the application. Everywhere they use of jquery.

Any suggestion?

Posted 10-Jun-12 22:02pm

Utrech576

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

**Zoltán Zörgő** · Answer 1 · 2012-06-10T22:35:00

Solution 1

I have googled for it, and it turned out, that border-radius wont work with (some) input elements in IE9. It is a bug in the CSS3 engine or the problem lies in the fact, that these elements in IE are rather API level controls. Other browser developers have rewritten them from the scratch. I have no IE9 to test, but have you tried BUTTON element instead? You could also try to make you input form a div decorated with this css and a transparent, border-less input field inside it.

Posted 10-Jun-12 22:35pm

Zoltán Zörgő

Comments

Sandeep Mewara 11-Jun-12 4:43am

5!

Utrech576 11-Jun-12 5:48am

Thanks for your replay,
Do you know any jquery plug-in to fix this problem (border-radius)?

Zoltán Zörgő 11-Jun-12 7:37am

You want to apply this css style to an element generated by jqueryui, or something that kind? I do't know about an out of the box solution, but you can write a document.ready handler that does this for you. Just be sure to be last.