пунктриная рамка для круга

[Koloyar]

Добрый день, уважаемые форумчане!

Я столкнулся с проблемой, описанной в сабже.

Собственно превратить div в круг довольно легко:

#circle {
    width: 112px;
    height: 112px;
    background: #333333;

       -moz-border-radius: 56px;
    -webkit-border-radius: 56px;
    	    border-radius: 56px;
}

Задать простому прямоугольному div'у пунктирную рамку еще проще: border: dashed white;

Проблема возникает при попытке соединить эти два момента в одном блоке - пунктир сливается в одну непрерывную линию. Чуть лучше получается если задать свойство border: dotted; - линия дробится на четыре равные части (на 12, 3, 6 и 9 "часов").

Возможно кто-нибудь сталкивался с такой проблемой, и находил пути ее решения. Был бы крайне признателен за подсказку.

[Great Rash]

Путей решения данной проблемы нет. Рендер во всех браузерах кроме ИЕ9(10) кривой. Смиритесь и юзайте картинку.

[USF]

http://jsfiddle.net/6Up4L/3/ только в хроме норм

похоже, что действительно картинку нужно использовать

Edited July 31, 2012 by USF

[Koloyar]

Спасибо за комментарии, кстати и в Хроме (10.648.*) и в Опере (11.1) (оба, мягко говоря, не последние версии) все показывается как надо, а вот Мозилла 14.1 выдает такую вот ерунду. Ну что же, буду мучиться, скорее всего с картинками. Посмотрим что из этого получится.

[SelenIT]

В порядке мозгового извра упражнения можно как-то так. Хотя по факту это всё равно картинка, только сгенеренная средствами браузера. Теоретически, наверное, можно было и без псевдика, мультифонами (с разным background-clip), но у меня не вышло

[wildhind]

как вариант, можно ещё канвасом порисовать

[Great Rash]

как вариант, можно ещё канвасом порисовать

Тогда уж SVG... Но если таких элементов будет неизвестное количество тогда без скрипта не обойтись.

[wildhind]

не помню, когда что-то обходилось без скриптов. Особенно canvas

А ведь топикстартер просил на css, так что это уже оффтоп.