Как задать расстояние между точками border dotted?

Допустим, есть такой класс:

.border_dotted {
    border:1px dotted #FFFFFF;
}

В разных браузерах расстояние между точками бордера разное.

Firefox и IEотрисовывают всё как надо.

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

У Operaже расстояние между точками совершенно не такое, как у остальных.

Однако, иногда создается необходимость сделать, что бы между ними было фиксированное растояние, например 1 пиксель.

В таком случе для задания точек с фиксированным растоянием между ними нужно использовать

.border_dotted {
    background:url('dоtted.png') left bottom repeat-x;
}

Повторяя картинку с точкой и необходимым расстоянием, мы добъемся, необходимого растояние между dots!

Например зададим линию hr в виде точек 1px с расстоянием между ними в 1px



Результат:


  1. CSS
  2. Примеры