How to make a double color single border using css?

Question

Guys actually I need help to make a single border double colored. It means a single line 25 % of red and other 75% of blue color using CSS.

My non-working code:

element { 
  border-bottom:2px solid red;
  position:relative;
  z-index:999;
  opacity:1;

I think it can be possible by :before and :after pseudo elements.

Please keep in mind that this is no platform for requests as “I can’t do it, please do it for me.” — KittMedia, Nov 14 '15 at 17:06
Possible duplicate of [CSS triangle custom border color](http://stackoverflow.com/questions/9450733/css-triangle-custom-border-color) — Jan, Nov 14 '15 at 19:02
This can also be achieved using `border-image` and gradients like mentioned here - http://stackoverflow.com/questions/32781360/css-border-colour-into-4-colours/32781447#32781447. The browser support is very low in IE (IE11+) but this is the ideal way to create border with more than one color. — Harry, Nov 15 '15 at 04:19

score 2 · Accepted Answer · answered Nov 14 '15 at 17:05

2

HTML:

<div class="element"></div>

CSS:

.element {
    border-bottom: 2px solid #00f;
    position: relative;
}

.element::before {
    background-color: #f00;
    content: "";
    height: 2px;
    position: absolute;
    width: 25%;
}

Demo: JSFiddle

answered Nov 14 '15 at 17:05

KittMedia

7,368
13
34
38

Thanks for an great help. – Saurabh Singh Mehra Nov 14 '15 at 17:17

How to make a double color single border using css?

1 Answers1