CSS3 Округлые и пунктирные границы?

Можно ли создать границу в CSS3 так, чтобы они были округлены и пунктирны?

Я закругляю свои углы, но они кажутся сплошными:

border: 1px dotted gray;
-moz-border-radius-topright: 30px 20px;
-moz-border-radius-topleft: 30px 20px;

Остальная часть границы пунктирная, но углы твердые.

Я понимаю, что это специфично для Firefox, но сейчас это прекрасно.

Спасибо

Ответы

Ответ 1

Это ошибка в firefox.see this issue, mozilla не поддерживает округленный угол для пунктирной и пунктирной границы.

Ответ 2

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

Ответ 3

Одним из решений является использование нескольких фоновых изображений. Этот подход можно использовать для указания другого background-image для четырех углов.

Вы также можете добавить пятое изображение для фонового изображения центра (при необходимости повторите).

Что-то вдоль линий...

.dashed-rounded-border {

    border: 2px dashed blue;

    background-image: url("top-left.png"), url("top-right.png"), url("bottom-right.png"), url("bottom-left.png"), url("center.png");
    background-position: left top, right top, right bottom, left bottom, center center;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x;

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

}

Ответ 4

Мое решение для этой проблемы -

background: url('../images/dot.png');
background-size: 4px;
background-position: bottom left;
background-repeat: repeat-x;

убедитесь, что точечный образ - это только одна точка с некоторым белым пространством на стороне ее. После этого вы должны быть хорошими.