Как сделать правильные пунктирные закругленные углы у элемента в FF?

Question

[Анна]

Доброго всем дня!
Вопрос следующий.
Как вы решили проблему с закругленными пунктирными углами в FF? Ведь то, что имеем по дефолту делается криво jsfiddle.net/g280aqgz/.
Нужно, что бы вся обводка была пунктирная, а не только прямые линии.
Гугл особо не помогает(
Спасибо

Answer 1

[hime2]

SVG или JS

<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
	.st0{fill:#fff;stroke:#000;stroke-linejoin:round;stroke-dasharray:10,10;}
</style>
<g><path class="st0" d="M170.5,180H21.5c-5.8,0-10.5-4.7-10.5-10.5V20.5C11,14.7,15.7,10,21.5,10h149.1c5.8,0,10.5,4.7,10.5,10.5 v149.1C181,175.3,176.3,180,170.5,180z"/></g>
</svg>

Comments

[Анна]

JS Например?

[hime2]

Анна: Лучше svg

[hime2]

Анна: js canvas вот почитайте
Я давно уже не рисую js, так что быстро не смогу набросать, просто не помню.
Рисуется квадрат, граница указывает как пунктир, и закругление.
Если вспомню напишу, но лучше попросите у кого-то.

[Анна]

О, спасибо за статейку =)

[hime2]

Анна: Так через canvas сделали или svg ?) Интересно

[hime2]

Анна:
А так не работает ?

border-radius: 7px;
    border: dashed 1px gray;
    background-color: lightgray;

Answer 2

[Алексей Быков]

Это называется "файрфокс пунктирной рамки"

Comments

[Анна]

А какая разница, сейчас эра кроссбраузерности, и фф обязателен в поддержке

[Алексей Быков]

Анна: так тут кроссбраузерность вовсю. Рамка есть? Есть. Просто рисуется она браузерами по собственным алгоритмам. Сделать одинаковую рамку в разных браузерах через свойство border не получится, увы.

В новом IE самые красивые рамки ^ ^

[Анна]

Да это понятно, что каждый браузер свои px строит, пофиг на это. Просто конкретно тут разница видна сильно и боюсь заказчику это не понравится, если только он в ff не зайдет, конечно )

Answer 3

[Andrew]

Когда-то делал по этому мануалу - www.guyroutledge.co.uk/blog/better-dotted-borders-...

Чистым css - никак.

Comments

[Анна]

Вот как раз и не хотела делать пунктир картинкой( жаль-жаль, думала, кто-нить придумал приблуду, как это обойти можно

[Andrew]

Анна: Каждый браузер рендерит по разному. "Серебряной пули" тут нет :)