How to create multi-color border with CSS?

css border css-shapes
Hamed mayahian picture Hamed mayahian · Aug 9, 2016 · Viewed 35.6k times · Source

How to create multi-color border like image below?

enter image description here

Answer

Theodore K. picture Theodore K. · Aug 9, 2016

You can do it without pseudo-elements, just with border-image: linear-gradient

.fancy-border {
  width: 150px;
  height: 150px;
  text-align:center;
  border-top: 5px solid;
  border-image:   linear-gradient(to right, grey 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5;
}
<div class="fancy-border">
  my content
</div>

Related questions

Control the dashed border stroke length and distance between strokes

Is it possible to control the length and distance between dashed border strokes in CSS? This example below displays differently between browsers: Big differences: IE 11 / Firefox / Chrome Are there any methods that can provide greater control of the dashed borders …

Read More
CSS triangle custom border color

Attempting to use a custom hex color for my css triangle (border). However since it uses border properties I am unsure how to go about doing this. I would like to steer clear of javascript and css3 simply because of …

Read More
HTML5 / CSS3 Circle with Partial Border

Is it possible to create a circle using only HTML5 / CSS3 which has a border that only goes part way around the circle? If not, what techniques can I use to accomplish this effect? I would prefer to use pure …

Read More