8 Cool Free HR Border Styles for article endings in blogger posts

Hi MyShorttips friends, this time we share a collection of Borders for HR actually, what is HR? HR is usually written in programming language <hr> or <hr/>


The <hr> tag in its scholarly language defines thematic breaks in HTML pages (eg topic shifts).

The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define changes) in HTML pages.

 

Usually, this is what I see appearing in novels, or even on the Wattpad platform someone uses it.. hehe, so the writing looks more beautiful! for wearing this kind of HR Style border decoration.

 

HR using Image Style

Here are some HR png / jpg styles that you can use.

STYLE Border HR ke - 1

STYLE Border HR ke - 2

STYLE Border HR ke - 3

STYLE Border HR ke - 4

STYLE Border HR ke - 5

STYLE Border HR ke - 6

STYLE Border HR ke - 7

STYLE Border HR ke - 8

 

 

 

 

Well, that's it, bro, some cool styles for ending or pausing articles or what we usually call HR Styles, because that's how it is in the programming world.

 

This can be used to modify existing HR styles in Blogger.

 

 

 

 

How to HR using CSS Style

 

 

HR HTML Script

How to call the style?

This using Class for call 

<br>
<hr class="styles1">
<br>
<hr class="styles2">
<br>
<hr class="styles3">
<br>
<hr class="styles4">
<br>
<hr class="styles5">
<br>
<hr class="styles6">
<br>
<hr class="styles7">
<br>
<hr class="styles8">
<br>
<hr class="styles9">
<br>
<hr class="styles10">
<br>
<hr class="styles11">
<br>
<hr class="styles12">
<br>
<hr class="styles13">
<br>
<hr class="styles14">
<br>
<hr class="styles15">
<br>
<hr class="styles16">
<br>
<hr class="styles17">
<br>
<hr class="styles18">

 

HR CSS Script

Just add this before </b:skin>

 

hr.styles1{
    border-top: 1px solid #8c8b8b;
}


hr.styles2 {
    border-top: 3px double #8c8b8b;
}

hr.styles3 {
    border-top: 1px dashed #8c8b8b;
}

hr.styles4 {
    border-top: 1px dotted #8c8b8b;
}

hr.styles5 {
    background-color: #fff;
    border-top: 2px dashed #8c8b8b;
}


hr.styles6 {
    background-color: #fff;
    border-top: 2px dotted #8c8b8b;
}

hr.styles7 {
    border-top: 1px solid #8c8b8b;
    border-bottom: 1px solid #fff;
}


hr.styles8 {
    border-top: 1px solid #8c8b8b;
    border-bottom: 1px solid #fff;
}
hr.styles8:after {
    content: '';
    display: block;
    margin-top: 2px;
    border-top: 1px solid #8c8b8b;
    border-bottom: 1px solid #fff;
}

hr.styles9 {
    border-top: 1px dashed #8c8b8b;
    border-bottom: 1px dashed #fff;
}

hr.styles10 {
    border-top: 1px dotted #8c8b8b;
    border-bottom: 1px dotted #fff;
}


hr.styles11 {
    height: 6px;
    background: url(http://myshorttips.com/imageurl.png) repeat-x 0 0;
    border: 0;
}


hr.styles12 {
    height: 6px;
    background: url(http://myshorttips.com/imageurl2.png) repeat-x 0 0;
    border: 0;
}

hr.styles13 {
    height: 10px;
    border: 0;
    box-shadow: 0 10px 10px -10px #8c8b8b inset;
}


hr.styles14 {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}


hr.styles15 {
    border-top: 4px double #8c8b8b;
    text-align: center;
}
hr.styles15:after {
    content: '\002665';
    display: inline-block;
    position: relative;
    top: -15px;
    padding: 0 10px;
    background: #f0f0f0;
    color: #8c8b8b;
    font-size: 18px;
}

hr.styles16 {
  border-top: 1px dashed #8c8b8b;
}
hr.styles16:after {
  content: '\002702';
  display: inline-block;
  position: relative;
  top: -12px;
  left: 40px;
  padding: 0 3px;
  background: #f0f0f0;
  color: #8c8b8b;
  font-size: 18px;
}


hr.styles17 {
    border-top: 1px solid #8c8b8b;
    text-align: center;
}
hr.styles17:after {
    content: '§';
    display: inline-block;
    position: relative;
    top: -14px;
    padding: 0 10px;
    background: #f0f0f0;
    color: #8c8b8b;
    font-size: 18px;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    transform: rotate(60deg);
}


hr.styles18 {
  height: 30px;
  border-style: solid;
  border-color: #8c8b8b;
  border-width: 1px 0 0 0;
  border-radius: 20px;
}
hr.styles18:before {
  display: block;
  content: "";
  height: 30px;
  margin-top: -31px;
  border-style: solid;
  border-color: #8c8b8b;
  border-width: 0 0 1px 0;
  border-radius: 20px;
}

How to add Image above?

this example.. Just Right Click that image to get Image Url..

then, copy - paste that url..like this

hr.styles11 {
    height: 6px;
    background: url(http://myshorttips.com/imageurl.png) repeat-x 0 0;
    border: 0;
}

 

 

 

That's it.

 

 

 

Jya...