css закругление углов

Soxay, не уверен, что в ie вообще получится так сделать

не знаю как вы смотрели:

input[type="submit"], input[type="button"], button {

    color: #8F8F8F;

    cursor: pointer;

    height: 25px;

    line-height: 25px;

    outline: medium none;

    padding: 0 15px;

}



.block_st_grey {

    -moz-border-bottom-colors: none;

    -moz-border-left-colors: none;

    -moz-border-right-colors: none;

    -moz-border-top-colors: none;

    background: -moz-linear-gradient(center top , #FFFFFF 0%, #F0F0F0 73%, #F9F9F9 100%) repeat scroll 0 0 transparent;

    border-color: #DEDEDE #DEDEDE #C4C4C4;

    border-image: none;

    border-style: solid;

    border-width: 1px;

    box-shadow: 0 1px 1px 0 #E3E3E3;

}



.b_r5px {

    border-radius: 5px 5px 5px 5px;

}

IE понимает закругления только с 9 версии.

http://htmlbook.ru/css/border-radius

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius.
Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius.

gruz_:насколько я понял вы не уверены что в ie это может работать, ну так на сайте примере работает.

Весь день лопачу этот участок кода, он не заставляет нормально работать заливку внутри закругленной рамки в ie, он кроме мозилы нигде не работает. Даже для хрома и оперы пришлось дописывать еще условия. А на сайте примере и в опере и хроме и в ie все работает нормально

conturov.net: в 9 и смотрю

ie9 и старше отлично понимает ccs3, для версий младше юзайте пирожок

Не уверен, потому что смотрел в ie8, где не работает.

Действительно три правила делают кнопку такой-же только для firefox, вот я скопировал скомпилированный стиль их 3-х браузеров, теперь работает в Firefox, Chrome и Opera (код надо причесать), живой пример с этим правилом: http://fo2012.org/test.html

.block_st_grey {
  -webkit-appearance: none;
  -webkit-box-align: center;
  -webkit-box-shadow: rgb(227, 227, 227) 0px 1px 1px 0px;
  -webkit-rtl-ordering: logical;
  -webkit-user-select: text;
  background-color: transparent;
  background-image: -webkit-linear-gradient(top, white 0%, #F0F0F0 73%, #F9F9F9 100%);
  background-origin: padding-box;
  border-bottom-color: #C4C4C4;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: #DEDEDE;
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: #DEDEDE;
  border-right-style: solid;
  border-right-width: 1px;
  border-top-color: #DEDEDE;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-top-style: solid;
  border-top-width: 1px;
  box-shadow: rgb(227, 227, 227) 0px 1px 1px 0px;
  box-sizing: border-box;
  color: #8F8F8F;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 13px;
  height: 25px;
  line-height: 25px;
  margin:0 2px;
  outline-color: #8F8F8F;
  outline-style: none;
  outline-width: 0px;
  padding:0 15px;
  position: static;
  text-align: center;
  width: 138px;
  -o-transform-origin: 69px 12.5px;
  background-attachment: scroll;
  background-clip: border-box;
  background-color: transparent;
  background-image: -o-linear-gradient(top, rgb(255, 255, 255) 0px, rgb(240, 240, 240) 73%, rgb(249, 249, 249) 100%);
  background-origin: padding-box;
  background-position: 0% 0%;
  background-repeat: repeat;
  background-size: auto;
  border-bottom-color: rgb(196, 196, 196);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: rgb(222, 222, 222);
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: rgb(222, 222, 222);
  border-right-style: solid;
  border-right-width: 1px;
  border-top-color: rgb(222, 222, 222);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-top-style: solid;
  border-top-width: 1px;
  box-shadow: rgb(227, 227, 227) 0px 1px 1px 0px;
  box-sizing: border-box;
  color: rgb(143, 143, 143);
  column-gap: 13px;
  column-rule: 0px rgb(143, 143, 143);
  column-rule-color: rgb(143, 143, 143);
  outline-color: invert;
  outline-style: none;
  outline-width: 3px;
  background: -moz-linear-gradient(center top , #FFFFFF 0%, #F0F0F0 73%, #F9F9F9 100%) repeat scroll 0 0 transparent;}

юзайте css3pie, как вам уже сказали и не замарачивайтесь с особенностями IE < 9.x )

Да и не будет работать в ie < 9.

Если не хотите картинок — то только скрипты, только хардкор.

Но и скрипты, в общем-то — это не всегда выход.

Выход — graceful degradation (:

да мне было бы достаточно заставить работать в ie9, приеду домой попробую данные советы

Нифига себе, даже в древнем ie6 работает. Спасибо, не знал эту либу.

vadts, в ie9 работает? Взял стили что предлагали в css3pie

border: 1px solid #696;

padding: 60px 0;

text-align: center; width: 200px;

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

border-radius: 6px;

-webkit-box-shadow: #666 0px 2px 3px;

-moz-box-shadow: #666 0px 2px 3px;

box-shadow: #666 0px 2px 3px;

background: #EEFF99;

background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));

background: -webkit-linear-gradient(#EEFF99, #66EE33);

background: -moz-linear-gradient(#EEFF99, #66EE33);

background: -ms-linear-gradient(#EEFF99, #66EE33);

background: -o-linear-gradient(#EEFF99, #66EE33);

background: linear-gradient(#EEFF99, #66EE33);

-pie-background: linear-gradient(#EEFF99, #66EE33);

behavior: url(/PIE.htc);

Идет просто заливка закругленной кнопки цветом, без градиента.