Как сделать округленные углы в CSS в Google Chrome

Ответ 1

Google Chrome (и Safari) работают со следующими префиксами CSS 3

-webkit-border-radius: 10px;

для всех углов при 10px

-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;

для верхнего левого угла и внизу слева при 8px

Для Firefox вы можете использовать:

-moz-border-radius: 10px;

для всех углов и

-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;

для верхнего левого угла и внизу слева

Ответ 2

Чтобы охватить как Chrome, FF, так и любой браузер, поддерживающий CSS 3:

{-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}

Ответ 3

В будущем полезно использовать код css следующим образом:

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Таким образом, когда выйдет IE9/IE10, ваш код также будет работать там: D

Ответ 4

Учитывая, что все браузеры теперь поддерживают радиус границы без префиксов; см. http://caniuse.com/#search=border-radius правильный синтаксис для использования сегодня:

border-radius: 5px;

Ответ 5

Да, но единственная проблема с этим заключается в том, что вы на самом деле бросаете ошибки css из-за того, что IE не работает, и Microshaft не хочет ничего делать, исправление, которое я использую, основано на js, но я думаю, что большинство людей знают все об этом, Но причина, по которой я его использую, - это то, что он всегда работает для меня и для всех основных браузеров. Здесь вы идете.

var obj= document.getElementById('divName');
var browserName=navigator.appName; 
var browserVer=parseInt(navigator.appVersion); 
//alert(browserName);
if ((browserName=="Microsoft Internet Explorer")) {
obj.style.borderRadius = "15px";
}else {
    obj.style.MozBorderRadius = "15px";
    obj.style.WebkitBorderRadius= "15px";

}