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

Question

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

Я округляя свои углы, но они появляются твердое тело с:

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

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

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

Благодаря

Answer 1

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

Answer 2

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

Answer 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; 

} 

Answer 4

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

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

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