3px border-radius has different look in IE and other browsers

Question

This CSS produce different results in latest browsers:

input {
    border:1px solid #ccc;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

The radius size in IE is smaller:

enter image description here

How do I fix this?

score 2 · Answer 1 · edited May 23 '17 at 12:01

2

The versions of IE till 8.0 doesnot support Border-radius as far as i know. So I used transparent PNG images which I have created instead of Div's which needs border-radius and also it solved the browser compatibility issues.

EDIT For IE9: you may be using quirks mode that's why it is not compatible.

edited May 23 '17 at 12:01

Community

1
1

answered Sep 20 '12 at 04:13

Mr_Green

40,727
45
159
271

The OP tagged his question with "IE9". IE9 supports `border-radius`. See [quirks mode](http://www.quirksmode.org/css/contents.html). – Cat Sep 20 '12 at 04:20

score 0 · Accepted Answer · answered Nov 21 '12 at 12:26

0

Change the IE specific value by 1px,

border-radius: 4px; (instead of 3px)

answered Nov 21 '12 at 12:26

glenderson

66
1
2

3px border-radius has different look in IE and other browsers

2 Answers2