Как лучше всего сделать закругления для кроссбраузерности?

[danneo]

Есть фотографии в рамке, рамка с закругленными уголками, таким образом фото получается закругленное. Но на самом деле фото квадратное. Закругляться должно через CSS.
Как лучше всего для кроссбраузерности, через div и float каждый угол или можно как-то через стиль, у которого прописать radius (как это не знаю, но в firefox так можно, но в IE это уже не работает)?

 

[Viodele]

Общая информация по сабжу(тут же и поддержка в браузерах) : Для просмотра ссылки Войди или Зарегистрируйся
Кроссбраузерный генератор: Для просмотра ссылки Войди или Зарегистрируйся

Как видно, не работает с IE версии ниже 9.

 

[sandi]

Таким образом

.box {
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;}

И чтобы осёл понимал свойство border-radius
нужно будет подключить библиотеку border-radius.htc

 

[NiceBro]

Кроссбарузерно даже в IE6 будет работать: Для просмотра ссылки Войди или Зарегистрируйся
<-- Viodele: А слабо ссылку на гугл под хайд спрятать? -->

 

[danneo]

а закругления разве сейчас не делают с помощью картинок с уголками в div (float:right)?

 

[ukalen]

а закругления разве сейчас не делают с помощью картинок с уголками в div (float:right)?

Делают и картинками чтобы "осел" чувствовал себя как все, но я все же предпочитаю css3 фитчи. Можно и как background в диве...

 

[viryys]

как вариант вам сюда Для просмотра ссылки Войди или Зарегистрируйся кроссбраузерно

 

[aaidlin]

Ну в общем с закруглениями пока дела в мире обстоят так:
1) IE до сих пор не научился понимать CSS команду border-radius (с любыми приставками).
2) В случае адаптивной верстки и для Opera каждому углу нужно прописывать скругление по отдельности: Для просмотра ссылки Войди или Зарегистрируйся, Для просмотра ссылки Войди или Зарегистрируйся ...
3) Firefox скруглит только тот элемент, которому приписали свойства border-radius. Т.е. если картинка в диве, который скруглен, то отображаться картинка будет квадратно.
4) Гугл Хром самый офигенный, скругляет все безо всяких проблем.
5) Отсюда вывод: пока идеальное кроссбраузерное скругление возможно только картинками. Именно картинками сверстано на сайте компании Apple красивое меню.

 

[indacircus]

Вариантов множество. Предпочтительные:
1. с использованием PIE.htc (сам часто пользуюсь) Для просмотра ссылки Войди или Зарегистрируйся
2. дополнительными обертываниями в div-ы либо таблицу с картинками уголков (увеличение количества кода)
3. самый любимый вариант если заказчик не принципиален, то используем border-radius и оповещаем любителей старых браузеров о том, что для корректного отображения надо сменить/обновить браузер

 

[duncan]

пока идеальное кроссбраузерное скругление возможно только картинками. Именно картинками сверстано на сайте компании Apple красивое меню.

не факт
например, часто использую border-radius, а для ИЕ подключаю маленький скрипт Для просмотра ссылки Войди или Зарегистрируйся (9 кб)

все вместе:

<style>
#left a{ -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px;}
</style>
<script src="js/DD_roundies_0.0.2a-min.js" type="text/javascript"></script>
<script type="text/javascript">
    DD_roundies.addRule("#left a", "15px");
</script>