Half colored border on top and bottom using CSS

Question

I would like to design my header as like above image. Here the issue is about bringing border with two different colors. Here is code what I have tried so far. Thanks in advance.

header {
  text-align: center;
  background-color: #7f7f7f;
}

h1 {
  color: #00a2e8;
  font-size: 40px;
  padding: 5px 0;
  display: inline-block;
  border-top: 3px solid #880015;
  border-bottom: 3px solid #880015;  
}

<header>
  <h1>HEADER</h1>
</header>

Answer 1

Here's one way without using pseudo elements:

h1 {
  display: inline-block;
  color: #00a2e8;
  font-size: 40px;
  padding: 5px 0;
  background:linear-gradient(to right, #ccc 50%, maroon 50%) bottom,
    linear-gradient(to right, maroon 50%, #ccc 50%) top;
  background-repeat: no-repeat;
  background-size:100% 2px;
} 

header {
  text-align: center;
  background-color: #7f7f7f;
}

h1 {
  display: inline-block;
  color: #00a2e8;
  font-size: 40px;
  padding: 5px 0;
  background:linear-gradient(to right, #ccc 50%, maroon 50%) bottom,
    linear-gradient(to right, maroon 50%, #ccc 50%) top;
  background-repeat: no-repeat;
  background-size:100% 3px;
}

<header>
  <h1>HEADER</h1>
</header>

---

Just for fun, you could produce a split-colored effect on the text color as well - with one extra pseudo element - like so:

header {
  text-align: center;
  background-color: #7f7f7f;
  --color1: maroon;
  --color2: #ccc;
}

h1 {
  position: relative;
  display: inline-block;
  font-size: 30px;
  color: var(--color1);
  background: linear-gradient(to right, var(--color1) 50%, var(--color2) 50%) bottom, linear-gradient(to right, var(--color2) 50%, var(--color1) 50%) top;
  background-repeat: no-repeat;
  background-size: 100% 2px;
  padding: 5px 0;
  white-space: nowrap;
}

h1:before {
  content: attr(data-text);
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 5px;
  width: 50%;
  color: var(--color2);
}

<header>
  <h1 data-text="HEADER">HEADER</h1>
</header>

<hr>

<header>
  <h1 data-text="Some text here">Some text here</h1>
</header>

Codepen demo

Answer 2

Use pseudo ::before and ::after on h1 tag along-with linear-gradient as background use height instead of border to get that styling,

header {
  text-align: center;
  background-color: #7f7f7f;
}

h1{
  color: #00a2e8;
  font-size: 40px;
  padding: 5px 0;
  display: inline-block;
  position:relative;
}
h1:before{
  content:"";
  width:100%;
  height:3px;
  left:0;
  top:0;
  position:absolute;
  z-index:9;
  background:linear-gradient(to right, white 50%, brown 50%);
}
h1:after{
  content:"";
  width:100%;
  height:3px;
  left:0;
  bottom:0;
  position:absolute;
  z-index:9;
  background:linear-gradient(to right, brown 50%, white 50%);
}

<header>
  <h1>HEADER</h1>
</header>