Question 44241 in Html Question posted in
Some basic documentation can be found here.

How to create a multi color border with tailwind or CSS? – Html

How can I create a multi-colored border like the image below?

enter image description here

Currently, I’m working in Tailwind. It would be better if it were possible in Tailwind.

I tried with gradient and nothing match my requirement

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Finally, this works for me! with CSS borders 

        .custom-border {
      border-image: linear-gradient(to right,
          #ffffff 0% 0.5%,
          #505050 0.5% 3.55357143%,
          #ffffff 3.55357143% 4.05357143%,
          #fedb00 4.05357143% 7.10714286%,
          #ffffff 7.10714286% 7.60714286%,
          #fedb00 7.60714286% 10.66071429%,
          #ffffff 10.66071429% 11.16071429%,
          #fedb00 11.16071429% 14.21428571%,
          #ffffff 14.21428571% 14.71428571%,
          #009cde 14.71428571% 17.76785714%,
          #ffffff 17.76785714% 18.26785714%,
          #505050 18.26785714% 21.32142857%,
          #ffffff 21.32142857% 21.82142857%,
          #009cde 21.82142857% 24.875%,
          #ffffff 24.875% 25.375%,
          #505050 25.375% 28.42857143%,
          #ffffff 28.42857143% 28.92857143%,
          #505050 28.92857143% 32.0%,
          #ffffff 32.0% 32.5%,
          #fedb00 32.5% 35.55357143%,
          #ffffff 35.55357143% 36.05357143%,
          #505050 36.05357143% 39.10714286%,
          #ffffff 39.10714286% 39.60714286%,
          #505050 39.60714286% 42.66071429%,
          #ffffff 42.66071429% 43.16071429%,
          #505050 43.16071429% 46.21428571%,
          #ffffff 46.21428571% 46.71428571%,
          #505050 46.71428571% 49.76785714%,
          #ffffff 49.76785714% 50.26785714%,
          #505050 50.26785714% 53.32142857%,
          #ffffff 53.32142857% 53.82142857%,
          #bdbdbd 53.82142857% 56.875%,
          #ffffff 56.875% 57.375%,
          #fedb00 57.375% 60.42857143%,
          #ffffff 60.42857143% 60.92857143%,
          #009cde 60.92857143% 64.0%,
          #ffffff 64.0% 64.5%,
          #505050 64.5% 67.55357143%,
          #ffffff 67.55357143% 68.05357143%,
          #505050 68.05357143% 71.10714286%,
          #ffffff 71.10714286% 71.60714286%,
          #505050 71.60714286% 74.66071429%,
          #ffffff 74.66071429% 75.16071429%,
          #505050 75.16071429% 78.21428571%,
          #ffffff 78.21428571% 78.71428571%,
          #505050 78.71428571% 81.76785714%,
          #ffffff 81.76785714% 82.26785714%,
          #505050 82.26785714% 85.32142857%,
          #ffffff 85.32142857% 85.82142857%,
          #505050 85.82142857% 88.875%,
          #ffffff 88.875% 89.375%,
          #505050 89.375% 92.42857143%,
          #ffffff 92.42857143% 92.92857143%,
          #bdbdbd 92.92857143% 96.0%,
          #ffffff 96.0% 96.5%,
          #bdbdbd 96.5% 99.55357143%,
          #ffffff 99.55357143% 100%);
      border-bottom:2px dashed;
      border-image-repeat: repeat;
      border-image-slice: 4;
    }
    <div class="custom-border"></div>


  2. 0

    I don’t think it is achievable with css borders.
    You could use svg to create a multi-colored border like below :

        <svg width="135" height="10" xmlns="http://www.w3.org/2000/svg">
        <line x1="0" y1="3" x2="30" y2="3" stroke="green" />
        <line x1="35" y1="3" x2="65" y2="3" stroke="red" />
        <line x1="70" y1="3" x2="100" y2="3" stroke="blue" />
        <line x1="105" y1="3" x2="135" y2="3" stroke="yellow" />
    </svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search