советы по CSS, HTML, Java Script, PHP

блог о веб технологиях

скругленные углы в IE на css

Май3

скругленные углы в ie на css

Ура! Дождались, наконец-то!!! Теперь сркугленные углы легко и быстро можно делать и в Internet Explorer. Не нужно больше долго и нудно резать изображения на кусочки, потом строить огромные конструкции -  теперь все стало намного проще и быстрей.

Как я писал ранее в своей статье про скругленные углы, в css 3.0 появилось одно очень замечательное свойство для скругления углов на чистом css – border-radius. Только вот поддерживали его не все браузеры.  Если Mozilla Firefox, Google Chrome и Safari поддерживали это свойство, но просто имя свойства нужно было записывать по-своему, то Internet Explorer как всегда “отличился” – он это свойство не поддерживал никак. Но, как говорится, прогресс не стоит на месте и теперь это свойство поддеживает и Internet Explorer, правда опять не как все :) .

Border-radius в Internet Explorer

Суть вот в чем, чтобы заставить IE понимать, что же это за свойство такое и как его правильно обрабатывать, нужно подключить небольшую библиотеку border-radius.htc, которая объясняет ему что да как. А в остальном все просто:

.rounded-box {
  border-radius: 15px;//задаем радиус бордеров
  behavior: url("http://neoprizma.net/demo/border-radius-v-ie/border-radius.htc");//подключаем файл-библиотеку для IE
  height:200px;
  width:400px;
  background:#c146a4;
  border:1px solid #ae037b;//настраиваем сам бордер
  -moz-border-radius:15px;//настраиваем бордер для FF
  -webkit-border-radius:15px;//настраиваем бордер для Safari и Chrome
}

Кстати работает не только в IE 8, но и в IE6, и в IE 7. Если что-то не получилось, вот рабочий пример скругленные углы на css для IE

размещено в CSS, HTML
2 Комментариев для

“скругленные углы в IE на css”

  1. On Май 11th, 2010 at 12:50 mihdan написал:

    А как же Opera < 9.51 ??? Там нет border-radius???

  2. On Май 13th, 2010 at 19:47 admin написал:

    ну, что правда, то правда, только в новых версиях

Вы должны авторизироваться чтобы оставить комментарий.