CSS3: как получить толстую горизонтальную линию шириной 5 пикселей

Question

Я попробовал следующий стиль кода css3 для горизонтальной линии шириной 5 px

<hr style=" border: solid 1px red;padding-top:10px; margin:25px auto 15px auto;clear:both" />

но я получаю красный прямоугольник шириной 5px.

Пожалуйста, сообщите мне правильный код стиля CSS3.

Answer 1

Пока элемент имеет правильную ширину, простое:

border-bottom:5px solid red;

сделает свое дело.

Answer 2

Вы должны использовать свойства ширины и высоты вместо границы:

width: 5px;
height: 1px;
color: red;

http://www.sovavsiti.cz/css/hr.html

Answer 3

Просто используйте свойство border-width и установите его в 5px.<hr style="border-width: 5px !important;">

Answer 4

Не используйте никакие другие вещи после свойства border, просто сделайте 5px вместо 1 px в рамке. I.e

Answer 5

Мой CSS для стиля линии HR;

.line_height      { height:4px;                                 }
.line_width       { width:100%;                                 } 
.line_hcenter     { margin-left: auto; margin-right: auto;      }
.line_vcenter     { margin-top: 10px; margin-bottom: 10px;      }
.line_color       { color:black;                                }
.line_bgcolor     { background-color:black;                     }   
.line_bordercolor { border-top: solid black; border-bottom: solid black; }

Добавьте эти классы в тег hr.

Все три цветовых (color, bgcolor, bordercolor) класса необходимы для получения сплошной цветной линии.

Классы .color и .bgcolor необходимы для кросс-совместимости браузера, иначе вы просто получите двойные строки.

Answer 6

Избавьтесь от верхнего отступа и используйте нижнюю границу, предложенную выше ... http://jsfiddle.net/ZdLfJ/