У меня угол поворота на 45 градусов, с изображением границы.

В Chrome и Safari это хорошо.

В Firefox противные линии сглаживания появляются по краю повернутого div, между его краем и границей.

Вот'простой HTML:

и здесь'с CSS:

.container {
    margin: auto;
    width: 400px;
    height: 400px;
    background-color: black;
    outline: 1px solid #333333;
    position: relative;
    overflow: hidden;
}

.corner {
    position: absolute;
    bottom: -68px;
    right: -66px;
    width: 86px;
    height: 82px;
    background-color: #F1F2F3;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    border-style: solid;
    border-width: 14px 16px 28px;

    -moz-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
    -webkit-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
    -o-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
    border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 fill repeat;

    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
}

и здесь'Это JSFiddle. Посмотрите на это в Firefox, чтобы понять, что я имею в виду:

http://jsfiddle.net/uAF2u/I»

мы видели советы по добавлению прозрачного контура в 1 пиксель вокруг div, который работал бы, если бы нене может иметь изображение границы, как в этом случае.

Кто-нибудь сталкивался с этим раньше и знает способ сортировки?