CSS Change color of half of a border

Question

I want to fill the top 50% of a border with a different color. How can I do it in CSS?

I want to fill the top 50% of a border with a different color. How can I do it in CSS? I tried a lot but didint work.

Answer 1

use gradient in border with image

.container {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,173)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,173) 33%, rgb(0,255,255) 67% );
padding: 2px;
}

.container > div { background: #fff; height: 100px }

<div class="container">
    <div>text inside container</div>
</div>

Answer 2

Use pseudo element ::after.

div {
  width: 100px;
  height: 50px;
  position: relative;
  background: red;
}

div:after {
  content: " ";
  position: absolute;
  bottom: 50px;
  left: 0px;
  width: 50px;
  height: 4px;
  background: green;
}

<div>fff</div>