How to create multi-color border like image below?
4 Answers
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> my content </div>You can do it with :after or :before psuedo element and css linear-gradient as shown below:
body { background: #ccc; } .box { text-align: center; position: relative; line-height: 100px; background: #fff; height: 100px; width: 300px; } .box:after { background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%); position: absolute; content: ''; height: 4px; right: 0; left: 0; top: 0; }<div>Div</div>Try it.
.test { width: 500px; height: 100px; background-color: #ccc; position: relative; } .test:before, .test:after { content: ""; position: absolute; left: 0px; right: 0px; height: 10px; background-image: -webkit-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px); background-image: -ms-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px); background-size: 80px; } .test:before { top: 0px; } .test:after { bottom: 0px; }<div></div>body { background: #ccc; } .box { text-align: center; position: relative; line-height: 100px; background: #fff; height: 100px; width: 300px; } .box:after { background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%); position: absolute; content: ''; height: 4px; right: 0; left: 0; top: 0; }<div>Div</div>
