border-color with multiple colors - css

Question

I found some information about border-color and it turns out, that you can specify each of the borders with different colors. My question here is following: Is it possible to specify the left border with two or more colors?
The deal is, that I have a navigation bar, with li elements, which are divided with padding and a border properties. For example:
li {
float: left;
padding-left&right: 10px;
border-left: 2px solid white;
}
and the border is as tall as the text itself in the li element. What I need is to get the border shorter than text. So I thought I could give it 3 colors: transparent - white - transparent.
Maybe there is a realistic way to do this? This was just at the top of my head and I found information, that it is not possible to shorten the border under the height of the li element.

Answer 1

The most appropriate way to implement this would be to make use of the border-image property along with a linear gradient like mentioned in Stephen Brickner's answer. But the downside to it is the browser support which is very low at present.
There are a couple of other approaches with better browser support than can be made use of and they are as follows:
Method 1: Pseudo Elements with Border
You could make use of a pseudo-element (:before or :after) with height shorter than the parent li element, add a border to it and position it appropriately to achieve the required effect. Thickness of the separator line is determined by the width of the pseudo-element's border.
.right-to-left {
position: relative;
float: left;
width: 150px;
padding: 0px 10px;
}
.right-to-left:after {
position: absolute;
content: '';
right: 0px;
height: 50%;
top: 25%;
border-right: 2px solid;
}
/* just for demo */
body {
background: black;
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
color: white;
}
<div class="right-to-left">Some text <br/> and more</div>
<div class="right-to-left">Some text <br/> and more</div>
<div class="right-to-left">Some text <br/> and more</div>
This method has the highest browser support among the possible options. However, it cannot be used if more than one color is required for the separator (or) a gradient effect is required.
Method 2: Background Gradients
You could add a linear-gradient as background image to the element and position it appropriately to produce a line shorter than the text. In this approach, thickness of the separator line is determined by the width of the background image.
.right-to-left {
width: 150px;
float: left;
padding: 0px 10px;
background-image: linear-gradient(to bottom, transparent 25%, white 25%, white 75%, transparent 75%);
background-size: 2px 100%;
background-repeat: no-repeat;
background-position: right top;
}
.right-to-left.multi {
background-image: linear-gradient(to bottom, transparent 25%, red 25%, white 75%, transparent 75%);
}
/* just for demo */
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
color: white;
}
hr{ clear: both; }
div{ margin: 10px 0px; }
<!-- prefix free library to support old browsers and avoid prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="right-to-left">Some text <br/> and more</div>
<div class="right-to-left">Some text <br/> and more</div>
<div class="right-to-left">Some text <br/> and more</div>
<hr>
<div class="right-to-left multi">Some text <br/> and more</div>
<div class="right-to-left multi">Some text <br/> and more</div>
<div class="right-to-left multi">Some text <br/> and more</div>
The browser support for this is better than border-image approach but worse when compared with the pseudo-element approach. The advantage is that the separator can have multiple colors or even a gradient pattern like in the above snippet.

Answer 2

You have to use a transform on it. Example:
.right-to-left {
border-width: 3px 3px 3px 0;
border-style: solid;
-webkit-border-image:
-webkit-gradient(linear, 0 0, 100% 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image:
-webkit-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:
-moz-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image:
-o-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%;
border-image:
linear-gradient(to left, black, rgba(0, 0, 0, 0)) 1 100%;
}