Закрукругление углов используя только CSS

Закругление углов?
Нет ничего проще.

1. Скачиваем htc файл сдесь.
2. Загружаем его в папку images.
3. В css файле создаем класс

.curved { 

-moz-border-radius:10px; / Firefox /
-webkit-border-radius:10px; / Safari and chrome /
-khtml-border-radius:10px; / Linux browsers /
border-radius:10px; / CSS3 /
behavior:url(images/border-radius.htc);

}

4. Присваиваем html элементам класс .curved, чтобы сделать углы у них закругленными.

Замечания

1. Путь к .htc файлу должен быть относительно документа не css файла
2. Хак не работает с элементами формы.
3. Дополнительный материал для самообразования:

  • IE8 is not very nice – pay attention here!

    I learned something while doing this. IE8.0.6 and IE8.0.76 handle this differently. First, the element with this property on it should be positioned to relative. If you have text on top of it, then that will have to be wrapped in something and also positioned relative. Example:

    <div><p>This is the text that goes on top of the rounded corners div</p></div>
    

    If you did this:

    <div>This is the text that goes on top of the rounded corners div</div>
    

    Then IE8.0.76 doesn’t play nice. IE8.06 however will work fine. I have NO idea why, but that is how it is.

    Originally posted 2011-04-09 08:08:57. Republished by Vancouver Web Design