Закругляем уголки в IE через CSS

Долгожданные скругленные углы теперь реальность, и применять их можно не только в Firefox, Chrome, Opera и Safari, но и в Internet Explorer 6 и выше. Больше не нужно долго и нудно резать изображения на кусочки или строить огромные конструкции, теперь все просто благодаря border-radius.htc.

Как мы знаем, все современные браузеры (кроме IE) уже научились понимать CSS-свойство border-radius.

Чтобы заставить InternetExplorer понимать свойство border-radius и научить его правильно обрабатывать данные, нужно подключить небольшую библиотеку border-radius.htc

Если говорить о готовом кроссбраузерном примере CSS-класса, то он будет таковым:

.round {
    border:1px solid #ae037b;
    border-radius: 15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    -o-border-radius: 5px;
    -khtml-border-radius: 5px;
    behavior: url("border-radius.htc");
    height:200px;
    width:400px;
    background:#c146a4;
}

Собственно вот рабочий пример:

Обратите внимание, что это работает везде, в том числе IE6, IE 7, и в IE 8.

Источник: neoprizma.ne

Оцени публикацию:
  • 17,66
Оценили человек: 17

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • поправьте в ie6
    30 сентября 2010, 10:47 коммент полезен : 0 # Guest
    • да все работает, смотрите ПО ССЫЛКЕ а не здесь)))
      10 марта 2011, 06:43 коммент полезен : 0 # Гость
  • Есть один важный ньюанс - в IE нельзя задать закруглённость каждого из углов отдельно.
    06 апреля 2011, 18:25 коммент полезен : 0 # Максим
  • Да, может и для одинокого блока это работает, но когда таких элементов множество, включая input'ы, то начинается такое, что мама не горюй. Скрытые элементы становятся видимыми, все прыгает. Не лучшее решение.
    06 сентября 2011, 03:33 коммент полезен : 0 # Techno77
  • Да, одно лечится, другое калечится. У меня есть костыли для придания полупрозрачной транспаретности в ИЕ, так при установке этого лекарства такой ужас возник!!! все ПНГ стали чернее атомной войны
    25 октября 2011, 06:56 коммент полезен : 0 # Аркадий (гость)
  • проверила пример в IE -Тестере, не работает (
    10 ноября 2011, 13:42 коммент полезен : +2 # Lena
  • неработает даже по ссылке
    07 июля 2012, 18:08 коммент полезен : +1 # Максим4
    • Какая возникает ошибка? Опишите проблему более подробно.
      09 июля 2012, 05:46 коммент полезен : -1 # Admin
  • Работает во всех IE, только в 9 цвет теряет и во всех тормозит сильно.
    19 февраля 2013, 17:23 коммент полезен : +1 # Ниф-ниф (гость)
  • не работает в ie8 если блок или картинка находится в другом блоке.
    01 апреля 2014, 12:59 коммент полезен : 0 # Вадим4
    • нужно родительскому элементу задать z-index: 1, тогда элемент с круглыми углами не исчезает
      01 апреля 2014, 13:07 коммент полезен : 0 # Вадим (гость)
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Введите изображенные цифры:
Captcha
Главная
X

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2017 YaPro.Ru

Главная » Веб-мастеру » CSS »