Как нарисовать пунктирную линию с помощью CSS?

Question

Как нарисовать пунктирную линию с помощью CSS?

Answer 1

Например:

hr {
  border:none;
  border-top:1px dotted #f00;
  color:#fff;
  background-color:#fff;
  height:1px;
  width:50%;
}

См. Также Стиль <hr> с CSS .

Answer 2

<style>
    .dotted {border: 1px dotted #ff0000; border-style: none none dotted; color: #fff; background-color: #fff; }
</style>
<hr class='dotted' />

Answer 3

Использование HTML:

<div class="horizontal_dotted_line"></div>

и в styles.css:

.horizontal_dotted_line{
  border-bottom: 1px dotted [color];
  width: [put your width here]px;
} 

Answer 4

В принятом ответе много ошибок, которые больше не требуются для современных браузеров. Я лично протестировал следующий CSS во всех браузерах, начиная с IE8, и он отлично работает.

 hr {
    border: none;
    border-top: 1px dotted black;
  }

border: none должен стоять первым, чтобы удалить все стили границ по умолчанию, которые браузеры применяют к тегам hr.

Answer 5

эта строка должна работать для вас:

<hr style="border-top: 2px dotted black"/>

Answer 6

Вы имеете в виду что-то вроде 'border: 1px dotted black'?

ссылка на w3schools.com

Answer 7

.myclass {
    border-bottom: thin red dotted;
}

Answer 8

Для этого вам просто нужно добавить border-top или border-bottom к вашему тегу <hr/> следующим образом:

<hr style="border-top: 2px dotted navy" />

с любым типом линии или цветом вы хотите

Answer 9

используйте так:

<hr style="border-bottom:dotted" />

Answer 10

Я перепробовал все решения здесь, и никто не дал чистую линию 1px. Для этого сделайте следующее:

border: none; border-top: 1px dotted #000;

В качестве альтернативы:

 border-top: 1px dotted #000; border-right: none; border-bottom: none; border-left: none;