Кроссбраузерное скругление краев. Возможно на CSS?

#html #css

Доброго всем времени суток, господа.
// CSS
.st_all
{
    border-radius: 9px 9px 9px 9px;
    -moz-border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
}

Подключая данный стиль, можно скруглить края у картинки/таблицы/итп. Плюс - можно
выбрать какой край и на сколько скруглять. Минус - не поддерживает IE.
Может ли кто подсказать более кроссбраузерное решение? Возможно ли обойтись без пакостей
в стиле JS?    

Ответы

Ответ 1

border-radius  -  это свойство CSS3. Поэтому, данное свойство поддерживают ВСЕ браузеры,
в которых реализована поддержка CSS3. В IE <= 8 это свойство не поддерживается( тогда
еще CSS3 была только в разработке ). GH, Opera и MF всегда впереди, поэтому на их счет
можно не беспокоиться. Safari тоже, вроде бы не отстает.
У меня, например, одно лишь свойство border-radius( без браузерных предикатов  )
поддерживается во ВСЕХ СОВРЕМЕННЫХ браузерах, включая IE9.


Ответ 2

На Google Code хостится проект Curved Corner с костылем для IE 6, 7, 8. В восьмом
точно работает (правда пользователю, возможно, потребуется разрешить активное содержимое,
если установлены высокие настройки безопасности), в 6 и 7 не проверял.
Ссылки:

Страница проекта на Google Code
Страница загрузки архива с демкой


Ответ 3

Вот Вам 38 статей о том как закруглить блок. И ещё одна.
Итого: ~39 способов закругления блока XD.


Ответ 4

VML и behaviour — curved-corner. Для использования сливаем border-radius.htc, складываем
рядом с CSS и используем следующий код:
.my-block {
  /* Для хороших браузеров */
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  -khtml-border-radius: 10px; /* KHTML */
  border-radius: 10px; /* CSS3 */
  /* Для плохих IE */
  behavior: url(border-radius.htc); /* учим IE border-radius */
}


Ответ 5

Попробуй использовать библиотеку Modernizer