Question 246556 in CSS Question posted in
Some basic documentation can be found here.

Css – How to add multiple colors to border

I would like to have three colors on my border-bottom like in the image below. How can I achieve this affect?

enter image description here

Tags:

3

Answers


  1. 0

    You can do it with :after or :before psuedo element and css linear-gradient :

    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 class="box">Div</div>
    Login or Signup to reply.
  2. 0 
        It Can be easily achieved with 3 div help
    <!DOCTYPE html>
<html>
<head>
<style> 
.container{
display:flex;
}
#div1 {

  border-bottom-left-radius:50px ;
  height:15px;
  width:200px;
  background-color:#49783f;
}

#div2 {
height:15px;
  background-color:#682a30;
width:150px;
}
#div3 {
height:15px;
width:200px;
background-color:#bdbdbe;
border-bottom-right-radius:50px ;
}
</
</style>
</head>
<body>

<div class="container">


<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

</div>

</body>
</html>
    Login or Signup to reply.
  3. 0

    Use border images. They’re widely supported in most browsers and are easy to use. Here’s how you can use border images to create this effect:

    1. Use Figma to design the border you want and then export it as an SVG. (If you’re not sure how to export here’s a good article that should help you.)
    2. Add the SVG to your project
    3. Import it like so border-image: url("/somepath/border.svg")
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search