Коригиране на изобразяването на границата-радиус

В браузъри, различни от Firefox, има проблеми при изобразяването на полета с радиус на границата .

Ако на даден блок е даден едновременно фон и граница, тогава призрачен ореол от един пиксел от цвета на фона се вижда извън заоблените ъгли. Това е особено забележимо в случаите, когато цветовете на фона на блока, неговата граница и фона на родителския блок са много различни. Доскоро това се проявяваше в Chrome, Opera и IE9, сега - в Opera (11.5) и IE9:

Ако границата има различни цветове за различните страни на кутията, тогава в Chrome 13 и IE9, на кръстовището на различни части на границата, също се вижда линия от един пиксел на цвета на фона:

В Chrome 13, с дебела граница и радиус на кривината, вътрешният периметър на заоблената граница е изчертан с груба, почти прекъсната линия:

CSS за илюстриране на проблема:

.бъги фон: #fff;
граница: 70px плътен # 000;
граница-радиус: 100px;
височина: 60px;
>

Можете да заобиколите тези проблеми, като замените кутията с две вложени кутии, зададете желания цвят на фона като фон на вътрешната кутия, цвета на границата като фон на външната кутия и зададете подплънките за външната кутия на желания дебелина на границата.

---