HTML тег <hr>
HTML тег <hr> (horizontal rule) определяет горизонтальную линию, которая вставляет разрыв строки до и после себя и занимает всю доступную ширину. Горизонтальная линия будет полезна для разделения тематического вступления и основного текста, например смена сцен в рассказе или переход к дополнительной информации в рамках раздела справочника.
Примечание: горизонтальная линия используется для визуального и логического разделения контента, но в ней отпадает необходимость, если сразу после нее идет заголовок или тег, начинающий новый раздел, или логический блок (<section>, <article>), так как эти элементы по умолчанию подразумевают тематические изменения.
По умолчанию, цвет горизонтальной линии серый, а толщина составляет 1px. Для изменения цвета, толщины и стиля линии можно воспользоваться CSS свойством border, позволяющим изменить сразу все три параметра. Или использовать свойства: border-color, border-width и border-style для изменения только одного из параметров:
Как добавить горизонтальную линию в HTML
В создании этой статьи участвовала наша опытная команда редакторов и исследователей, которые проверили ее на точность и полноту.
Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.
Количество просмотров этой статьи: 22 540.
Из этой статьи вы узнаете, как добавить горизонтальную линию в HTML. Горизонтальную линию можно использовать для разделения контента на сайте. Код для создания линии достаточно прост. Тем не менее в HTML 4.01 можно изменить дизайн линии с помощью внутренних команд. В HTML5 для стилизации линии придется использовать CSS. [1] X Источник информации
Как изменить цвет элемента <hr />?
Я перепробовал все способы изменить цвет <hr/> :
Но это выглядит так как в Chrome, так и в FF:
Как я могу изменить его цвет на чисто желтый?
2 ответа
Придайте hr стиль с помощью:
Вам нужно избавиться от border или изменить свойства border , чтобы он работал.
От @Darko Z в комментариях:
Во многих браузерах стиль по умолчанию для HR заключается в добавлении некоторого затенения к border , так что получается грязный #whateverColourYouWant. Чтобы избавиться от этого, необходимо явно указать границу (а не только border-color ).
Changing the color of an hr element
I want to change the color of my hr tag using CSS. The code I’ve tried below doesn’t seem to work:
27 Answers 27
I think you should use border-color instead of color , if your intention is to change the color of the line produced by <hr> tag.
Although, it has been pointed in comments that, if you change the size of your line, border will still be as wide as you specified in styles, and line will be filled with the default color (which is not a desired effect most of the time). So it seems like in this case you would also need to specify background-color (as suggested by @Ibu).
HTML 5 Boilerplate project in its default stylesheet specifies the following rule:
An article titled “12 Little-Known CSS Facts”, published recently by SitePoint, mentions that <hr> can set its border-color to its parent’s color if you specify hr < border-color: inherit >.
- border-color works in Chrome and Safari.
- background-color works in Firefox and Opera.
- color works in IE7+.
I think this can be useful. this was simple CSS selector.
Doing it this way allows you to change the height if needed. Good luck. Source: How To Style HR with CSS
Tested in Firefox, Opera, Internet Explorer, Chrome and Safari.
Only border-top with color is enough to make the line in different color.
This will keep the Horizontal Rule 1px thick while also changing the color of it:
After reading all the answers here, and seeing the complexity described, I set upon a small diversion for experimenting with HR. And, the conclusion is that you can throw out most of the monkeypatched CSS you wrote, read this small primer and just use these two lines of pure CSS:
That is ALL you need to style your HRs.
- Works cross-browser, cross-device, cross-os, cross-english-channel, cross-ages.
- No "I think this will work. ", "you need to keep Safari/IE in mind. ", etc.
- no extra css — no height , width , background-color , color , etc. involved.
Just bulletproof colourful HRs. It’s that simple TM .
Bonus: To give the HR some height H , just set the border-width as H/2 .
I believe this is the most effective approach:
Or if you prefer doing it on all hr elements write this on you CSS:
The background is the one you should try to change.
You can also work with the borders color. I am not sure; I think there are cross-browser issues with this. You should test it in different browsers.
You can add bootstrap bg class like
if u use css class then it will be taken by all ‘hr’ tags , but if u want for a particular ‘hr’ use the below code i.e, inline css
if it’s not working in chrome try below code:
Some browsers use the color attribute and some use the background-color attribute. To be safe:
It’s simple and my favorite.
I’m testing on IE, Firefox and Chrome May 2015 and this works best with the current versions. It centers the HR and makes it 70% wide:
You should set border-width to 0; It works well in Firefox and Chrome.
Since i don’t have reputation to comment, i will give here a few ideas.
if you want a css variable height, take off all borders and give a background color.
if you want simply a style that you know that will work (example: to replace a border in a ::before element for most email clients or
In both ways, if you set a width, it will always have it’s size.
No need to set display:block; for this.
To be totally safe, you can mix both, ’cause some browsers can get confused with height:0px; :
With this method you can be sure that it will have at least 2px in height.
It’s a line more, but safety is safety.
This is the method you should use to be compatible with almost everything.
Remember: Gmail only detects inline css and some email clients may not support backgrounds or borders. If one fails, you will still have a 1px line. Better than nothing.
In the worst cases, you can try to add color:blue; .
In the worst of the worst cases, you can try to use a <font color=»blue»></font> tag and put your precious <hr/> tag inside it. It will inherit the <font></font> tag color.
With this method, you WILL want to do like this: <hr width=»50″ align=»left»/> .