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 и для него прописывать закругленные углы. Далее я описывать не буду создание формы с округленными углами так как считаю это нудным 
можете посмотреть демо.
Вот и все что косается закруленных углов, я считаю что это самый легкий и актуальный способ их создания, вы наверное скажете а что если Javascript отключон, правильно скажет . Но я не думаю чот на свете так много людей которые сидят на IE и Opera с отключенным Javascript’ом, но если вы всетаки хотите что бы ваши округленные углы работали во всех браузерах вам то единственный способ добиться такого резкльтата это использование backround-image. Ну вот и все остовляйте свои комментарии…
