CSS браузер безопасный способ применить границу радиуса?

Question

Я хочу применить верхний левый и верхний правый радиус радиусом 3 пикселя.

Как я могу сделать это во всех браузерах (например, IE, WebKit, Mozilla)?

И если браузер не поддерживает атрибут border-radius, просто по умолчанию нет радиуса (квадратный угол).

Answer 1

Если IE когда-либо будет поддерживать какие-либо стандарты, я буду плохо кушать.

Это лучшее, на что вы можете надеяться:

-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;

Редактировать: мой плохой, пропустил часть "только верхний левый и правый", исправил кодз

Answer 2

border-radius.com отлично подходит для этого:

-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;

Answer 3

проверьте эту тему. он должен покрывать все ваши потребности в закругленных углах: Эмуляция CSS3 border-radius и box-shadow в IE7 / 8

Answer 4

border-top-left-radius:3px;
border-top-right-radius:3px;
-webkit-border-top-right-radius:3px;
-webkit-border-top-left-radius:3px;
-moz-border-radius-topright:3px;
-moz-border-radius-topleft:3px;

Это будет работать в браузерах Mozilla и Webkit и во всем, что поддерживает свойство CSS3 border-radius. IE = нет. Кроме того, вы должны заметить, что FF2 будет поддерживать это, но закругленный край не очень хорош.