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

Как все знают что 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> тэг:

Затем вам нужно 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 код в вашу страницу:

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

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

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

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

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

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

8 Комментария

  1. Fisk
    March 13, 2010 at 1:34 pm

    В примеры углы не закруглены. Opera 10.50

    Reply
  2. admin
    March 13, 2010 at 4:05 pm

    Кому:Fisk,  Все углы не закругленны или только input’ы? У меня в 10.20 все нормально работает

    Reply
  3. Fisk
    March 14, 2010 at 9:17 am

    Все углы не закруглены. Но в Mozilla 3.6 все нормально.

    Reply
  4. gwer
    March 18, 2010 at 8:14 pm

    Помимо “-webkit-border-radius” и “-moz-border-radius”, нельзя забывать про “border-radius” и “-khtml-border-radius:25px;”. Мы ведь делаем кроссбраузерную верстку, не так ли? ;)
    Вероятнее всего из-за отсутствия первого из недостающих параметров в 10.5 отсутствуют закругленные углы. Кроме кодов под каждый движок, нельзя забывать про универсальные. Та же опера 10.5 не поддерживает параметр, написанные для вебкита или Gecko. Да и IE9, которая уже существует в виде пре-альфа-подобия в паблике.

    Reply
  5. Vitaly
    April 21, 2010 at 7:38 pm

    Спасибо Огромное! В опере работает супер! просто автор не выложил curvycorners.js, но его можно взять и у него самого :)

    Reply
  6. malkin
    June 7, 2010 at 6:45 pm

    незнаю, что у вас там не закруглено.. генерирую css с помощью http://border-radius.narod.ru , всё работает и в опере

    Reply
  7. Владимир
    August 22, 2010 at 9:03 am

    Полезная статья, спасибо автору, только вот почему вы не выложили файл curvycorners.js ? Неудобно ведь после прочтения вашей статьи искать его на внешке, если бы можно было скачать тут. Исправьте!

    Reply

Оставьте комментарий

(обязательно)