CSS Border Colour Into 4 Colours

Question

Is there any way that I can have 4 different colours on one side of a border in CSS? I currently have

#header
{
border-color:#88a9eb;
}

I want to have a border of 4 solid colours, with a 25% split on each, Is this something that is possible?

I want to make a solid version of this without the white bits in between.

Answer 1

You can use box-shadow and after psuedo-element to do this

What I did:

I first created an :after element on the bottom, then added box-shadows horizontally with different colors

If you want to change the strength of the border simply give more height to the :after element

div {
  width: 200px;
  height: 100px;
  position: relative;
  background: grey;
}
div:after {
  bottom: 0;
  position: absolute;
  content: "";
  width: 50px;
  height: 5px;
  background: green;
  box-shadow: 50px 0 0 0 red, 100px 0 0 0 orange, 150px 0 0 0 green;
}

<div></div>

Same thing on a larger div will be like this

div {
  width: 500px;
  height: 100px;
  background: orange;
  position: relative;
}
div:after {
  bottom: 0;
  position: absolute;
  content: "";
  width: 100px;
  height: 5px;
  background: green;
  box-shadow: 100px 0 0 0 darkred, 200px 0 0 0 red, 300px 0 0 0 yellow, 400px 0 0 0 tomato;
}

<div></div>

Answer 2

You can use the border-image property to create a gradient border with 4 colors. Normally gradients move gradually from one color to another and it produces a blur like effect but setting the color-stops (the percentage values) such that the end-point of one color is same as the starting point of the next color makes the colors come to a hard stop and thus end up producing block like effects.

The border can be set to the required side by changing the border-image-width and the direction of the gradient. For example, top & bottom borders would need the gradient to go from left to right while left & right borders would need the gradient to go from top to bottom.

The gradients use percentage values for the size (and color-stop) and hence they are responsive by default and can adapt automatically even if the container's dimensions change.

The only drawback to using border-image is the poor browser support for this property at present. IE10- do not support this property.

.bordered-top {
  border-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
  border-image-slice: 1;
  border-image-width: 4px 0px 0px 0px;
}
.bordered-bottom {
  border-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
  border-image-slice: 1;
  border-image-width: 0px 0px 4px 0px;
}
.bordered-left {
  border-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
  border-image-slice: 1;
  border-image-width: 0px 0px 0px 4px;
}
.bordered-right {
  border-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
  border-image-slice: 1;
  border-image-width: 0px 4px 0px 0px;
}
div {
  height: 100px;
  width: 300px;
  padding: 10px;
  background: beige;
  margin: 10px;
}

<!-- library added only for old browser support -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class='bordered-top'>Border only on top</div>
<div class='bordered-bottom'>Border only on bottom</div>
<div class='bordered-left'>Border only on left</div>
<div class='bordered-right'>Border only on right</div>

---

For IE10+ support, you could mimic the same behavior by using gradients for the background-image property instead of border-image like in the below snippet.

Unlike with border-image, here the side on which the border is applied cannot be controlled using the border-image-width and we have to use background-position instead to position the image at the required position.

The background-size determines the thickness of the border. For top & bottom borders, the size in x-axis should be 100% and that in y-axis is the thickness of the border. For left & right borders, the size in y-axis should be 100% and that in x-axis is the thickness of the border.

.bordered-top {
  background-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
  background-size: 100% 4px;
  background-repeat: no-repeat;
  background-position: 0% 0%;
}
.bordered-bottom {
  background-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
  background-size: 100% 4px;
  background-repeat: no-repeat;
  background-position: 0% 100%;
}
.bordered-left {
  background-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
  background-size: 4px 100%;
  background-repeat: no-repeat;
  background-position: 0% 0%;
}
.bordered-right {
  background-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
  background-size: 4px 100%;
  background-repeat: no-repeat;
  background-position: 100% 0%;
}
div {
  height: 100px;
  width: 300px;
  padding: 10px;
  background: beige;
  margin: 10px;
}

<!-- library added only for old browser support -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class='bordered-top'>Border only on top</div>
<div class='bordered-bottom'>Border only on bottom</div>
<div class='bordered-left'>Border only on left</div>
<div class='bordered-right'>Border only on right</div>

Answer 3

Best solution is with linear-gradient. Definitely. But someone who's the beginner in this could find this solution useful. By using 2-3-4 colors or even more, this is the right way to do them. Not the best solution for this question, but maybe someone while reading this wants to understand better how do the colors with borders work.

<html>
<head>
<style>
p.one {
    border-style: solid;
    border-color: #0000ff;
}

p.two {
    border-style: solid;
    border-color: #ff0000 #0000ff;
}

p.three {
    border-style: solid;
    border-color: #ff0000 #00ff00 #0000ff;
}

p.four {
    border-style: solid;
    border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>
<body>

<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>

</body>
</html>

Answer 4

I have taken what harry had and amended it to suit my needs. I now have:

  border-image: linear-gradient(to right, #8CC63F 0%, #006F3B 25%, #ED1C24 25%, #9B1B1E 50%, #85CDEC 50%, #217EC2 75%, #FFC20E 75%, #F04E23 100%);
  border-image-slice: 3;
  border-image-width: 0px 0px 4px 0px;
  border-image-repeat: round;

This is the best solution for my needs.

Answer 5

you can try this one:

.solid{

  width: 300px;
  border-image: linear-gradient(to right, red 25%, blue 25%, blue 50%, green 50%, green 75%, orange 75%);
  border-image-slice: 4;


}

DEMO

Answer 6

Complicated but cool solution: Use SVG (e.g. <svg> tag), add 4 paths, assign different stroke-dasharray and stroke-color attributes.

Simpler and still cool solution: Try border-image. (See Harry's answer)

Very simple solution if you just need one border: Create an image, but it as the background image, repeat it only on one axis, position it at the edge of the container, e.g. (for bottom border)

.container {
    background-image: url(image.png);
    background-repeat: repeat-x;
    background-position: bottom left;
}