Базовый CSS но без поддержки IE
-moz-border-radius: 12px; /* FF1+ */-webkit-border-radius: 12px; /* Saf3+, Chrome */-khtml-border-radius: 12px; /* old Konqueror browsers */border-radius: 12px; /* Opera 10.5+, IE 9 */
В общем это то же самое, что предлагает вот этот гламурненький сайт border-radius.com. К сожалению, этот способ работает только в вакуумных условиях, — в суровой реальности с вечно живым ИЕ, всё не так просто. А разве кто-то сомневался? Но по крайней мере можно определиться с радиусом скругления.
А вот этот генератор закругленных углов на CSS3 (aimweb.name/border/) уже выглядит несколько серьезнее. Кроме визуального представления еще даются рецепты от головной боли, причиняемой Интернет Эксплорером. Для поддержки скругленных углов в IE, следует использовать Vml-скрипт (//fetchak.com/ie-css3/), подключаемый в CSS.
Ниже приведен код CSS, сгенерированный этим сервисом.
Кроссбраузерный CSS для IE
border-radius: 12px;-moz-border-radius: 12px;-webkit-border-radius: 12px;background: #efefef url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9IiNGRkYiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48cmVjdCBmaWxsPSIjZWZlZmVmIiByeD0iMTIiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48L3N2Zz4=);behavior: url(ie-css3.htc); /* Это пилюля для IE */
Если файл ie-css3.htc находится в корне сайта, то в скобках будет указано только его название. Если он лежит в другом месте, например в папке /css/, то соответственно это нужно указать. С этим, думаю, все ясно.
behavior: url(/css/ie-css3.htc);
Скачать ie-css3.htc:
ie-css3.htc
Вот здесь очень навороченный способ скругления углов (//web-standards.ru/articles/cross-browser-rounded-corners/), о котором подробно написал Лев Солнцев. Если есть время, можете почитать для общего образования. Но, в принципе, того что здесь написано вполне достаточно, чтобы быстро и эффективно реализовать скругленные углы без дополнительных изображений, одними лишь средствами CSS!