CSS3 закругленные углы для всех браузеров

7-03-2010

Как все знают что CSS3 свойство border-radius работает в Safari, Firefox и Chrome, но по каким то мистическим причинам не работает в Internet Explorer и Opera. Итак для того чтобы сделать закругленные углы в IE вам придется использовать некоторые хитрости, допустим использование CSS классов с фоновым изображением, которое имеет закругленные углы, но это всего лишь один из способов, на мой взгляд не самый лучший.
Наилучшим и быстрым решением создания закругленных углов во всех браузерах является использование сочетания CSS3 и JavaScript. CuvyCorners бесплатная JavaScript библиотека для создания закругленных углов для HTML элементов. Конечный результат будет выглядеть следующим образом:

Закругленные углы

Большим преимуществом этого скрипта является то что он позволяет создать закругленные углы в Safari, Chrome и Mozilla (которые поддерживают закругленные углы) с помощью CSS3, так и в IE и Opera с помощью JavaScript.
Единственное что вам понадобиться делать это включить curvycorners.js в ваш <head> тэг:

<script type="text/javascript" src="curvycorners.js"></script>

Затем вам нужно CSS классы похожие на следующие:

.roundedCorners{
width: 220px;
padding: 10px;
background-color: #DDEEF6;
border:1px solid #DDEEF6;

/* Do rounding (native in Safari, Firefox and Chrome) */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}

Для этого CSS описания добавляем следующий Javascript код в вашу страницу:

<script type="text/JavaScript">
	addEvent(window, 'load', initCorners);
	function initCorners() {
		var setting = {
		tl: { radius: 6 },
		tr: { radius: 6 },
		bl: { radius: 6 },
		br: { radius: 6 },
		antiAlias: true
	}
		curvyCorners(setting, ".roundedCorners");
	}
</script>

tl,tr,bl,br это: верхний-левый, верхний-правый, нижний-левый, нижний-правый углы.
Если у вас разные CSS классы вы можете применять их изменяя предыдущий код следующим образом:

...
curvyCorners(setting, ".roundedCorners");
curvyCorners(setting, ".roundedCorners_1");
curvyCorners(setting, ".roundedCorners_2");
...

Теперь если вы хотите применить закругленные углы к элементу DIV используйте следующий код:

<div class="roundedCorners"> </div>

Вот таким будет результат во всех браузерах:

Закругленные углы div

Также наверное важно отметить что эти закругленные угле не работают для форм, но это легко поправимо просто нужно вкладывать каждый элемент формы который вы хотите сделать с закругленными углами в DIV и для него прописывать закругленные углы. Далее я описывать не буду создание формы с округленными углами так как считаю это нудным :) можете посмотреть демо.
Вот и все что касается закругленных углов, я считаю что это самый легкий и актуальный способ их создания, вы наверное скажете а что если Javascript отключен, правильно скажет :). Но я не думаю что на свете так много людей которые сидят на IE и Opera с отключенным Javascriptом, но если вы все таки хотите что бы ваши округленные углы работали во всех браузерах вам то единственный способ добиться такого результат это использование backround-image. Ну вот и все оставляйте свои комментарии

Fisk3.13.2010 01:03
В примеры углы не закруглены. Opera 10.50
admin3.13.2010 04:03
Кому:Fisk,  Все углы не закругленны или только input'ы? У меня в 10.20 все нормально работает
Fisk3.14.2010 09:03
Все углы не закруглены. Но в Mozilla 3.6 все нормально.
gwer3.18.2010 08:03
Помимо "-webkit-border-radius" и "-moz-border-radius", нельзя забывать про "border-radius" и "-khtml-border-radius:25px;". Мы ведь делаем кроссбраузерную верстку, не так ли? ;) Вероятнее всего из-за отсутствия первого из недостающих параметров в 10.5 отсутствуют закругленные углы. Кроме кодов под каждый движок, нельзя забывать про универсальные. Та же опера 10.5 не поддерживает параметр, написанные для вебкита или Gecko. Да и IE9, которая уже существует в виде пре-альфа-подобия в паблике.
Vitaly4.21.2010 07:04
Спасибо Огромное! В опере работает супер! просто автор не выложил curvycorners.js, но его можно взять и у него самого :)
malkin6.7.2010 06:06
незнаю, что у вас там не закруглено.. генерирую css с помощью http://border-radius.narod.ru , всё работает и в опере
Владимир8.22.2010 09:08
Полезная статья, спасибо автору, только вот почему вы не выложили файл curvycorners.js ? Неудобно ведь после прочтения вашей статьи искать его на внешке, если бы можно было скачать тут. Исправьте!
    admin8.22.2010 10:08
    Спасибо за поправку вот ссылка и в статье есть(уже) http://prootime.ru/demos/roundcorners/curvycorners.rar
Ramzess2.17.2011 06:02
За статью - ставлю 5. За грамматику - 2. P.S "Эдинственное" что вам понадобиться "зделать" это включить curvycorners.js в ваш тэг
    admin2.17.2011 07:02
    хехе)))) да бывает)))
      iQuik.ru6.3.2012 05:06
      Бывает, но текст-то вы не поправили. "зделать" как было - так и осталось в тексте. Есть ведь Яндекс-вебмастер - проверка орфографии. Вот еще шедевр: "но по коким то" -> "но по каким-то" А еще в Firefox 3.6 комментарии не работают (жмешь "ответить" - ничего не происходит)
      dzantiev6.3.2012 08:06
      человек расслабся...
Алексей11.9.2011 09:11
Все заработало, хоть пладить рисунки не надо Спасибо
    dzantiev11.9.2011 09:11
    я бы вам еще вот это посоветовал http://css3pie.com/
Alexandr2.11.2012 10:02
А почему IE не поддерживает CSS3, Может есть какая-то возможность установить в IE поддержку CSS3, и если такое возможно то как программно на php или JavaScript проверить какую версию CSS поддерживает браузер ????
    dzantiev2.11.2012 10:02
    Да не IE9+ поддерживают CSS3, а все остальные не поддерживают его потому что на то время как эти браузеры вышли не было CSS3. Через PHP можно проверить версию браузера, но точно функцию не помню. Можно попробовать еще PIE
Alexandr2.11.2012 12:02
Нашол маленький нюанс -webkit-border-radius: 6px; закругляет все углы -webkit-border-radius: 6px 6px 0 0 ; должен закруглить только верхние углы, не срабатывает в IE, работает В Mozilla ....
    Alexandr2.11.2012 12:02
    PIE такая-же проблема закругляет либо все углы либо неодного
      dzantiev2.11.2012 12:02
      c префиксом -webkit- будет только в хроме и в сафари работать, с PIE все отлично работает, наверно просто не так что то делаете. Попробуйте прописать и с еще префиксами -moz- и -o- и просто border-radius. И поставьте position:relative
Евгений2.29.2012 07:02
автор, одумайся! Посмотри в словаре как пишется "Зделать" :( а так статья ничего...
Дима5.18.2012 04:05
Решение не работает с градиентами. Может посоветуете, что делать.
Я человек7.29.2012 09:07
Как интересно, вам говорили исправить грамматические ошибки не один раз, и вам это не надоело! Ладно, хороший материал
Кирилл10.5.2012 11:10
После "Зделать" захотелось закрыть сайт...
Евгений10.23.2012 10:10
отличная статья, единственный пример из всего нэта, который правда работает. есть еще с файлом каким-то но в моём ие глухо, а здесь всё как по масле. правда тормозит если много изменений делать, но оно того стоит))
Юля12.3.2012 03:12
Тут уже писали про PIE, его легче использовать. Используем CSS3 свойство border-radius для Opera 10.5+ и новых браузеров, которые будут появляться дальше, для некоторых продвинутых браузеров используем специфические (вендорные) свойства, для IE6-8 плагин PIE(его можно бесплатно скачать и в папку с сайтом забросить файл PIE.htc). Вот такой код работает и в IE,плюс его, что не надо для каждого угла задавать отдельные значения:
.roundedEl {
	border: 1px solid #fff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	behavior: url(PIE.htc);
}
Руслан3.1.2013 07:03
Спасибо это крутой скрипт облегчает вёрстку))))Работает в 6 Ie.Спасибо
ОСТАВИТЬ КОММЕНТАРИЙ