Кроссбраузерный border-radius

Многие прописывают в css лишь один border-radius и на этом успакаиваются и идут дальше, однако это далеко не правильно, если у Вас конечно не подключены дополнительные библиотеки. В новых версиях браузеров вполне хватит обычного border-radius, однако если зайти в предыдущие версии этих браузеров, то можно увидеть, что border-radius не работает. Что же делать? И тут к нам приходят магические префиксы.

Сейчас я преведу наиболее полный список этих самых префиксов, включая популярные и не очень браузеры. Скажем, что мы будем применять данные префиксы для класса box.

 .box {
border-radius: 3px; //по спецификации
-moz-border-radius: 3px; //FireFox
-webkit-border-radius: 3px; // Safari
-o-border-radius: 3px; // Opera
-ms-border-radius: 3px; // Dniwe IE
-icab-border-radius: 3px; // icab
-khtml-border-radius: 3px; //khtml  
}

Я не буду описывать хаки для IE(IE не поддерживает border-radius), потому что каждый фильтр и хак под IE это торможение работы сайта. Могу сказать лишь, что кроссбраузерный border-radius получится 100%, если использовать заранее сделанную картинку с закругленными краями. Но у этого способа есть существенный минус: каждая картинка имеет вес, а при большом количестве картинок сайт будет открываться значительно дольше. А при большом количестве картинок можно и вовсе схватить бан от поисковиков. Надеюсь кому-то помогут эти префиксы.