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 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 2

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 3

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 4

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;
}

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