CODEWITHSUNDEEP
css
fresher
fresher

Reputation: 399

how to give multiple border color to same css class

I am very new to CSS. I have CSS for timeline. I want to multiple BORDER colors. for example red , blue, green How I can do this. 

<ul class="list-unstyled timeline  red widget">
  <ul class="list-unstyled timeline  blue widget">
  <ul class="list-unstyled timeline  green widget">



.timeline h2.title:before {
    content: "";
    position: absolute;
    left: -23px;
    top: 3px;
    display: block;
    width: 14px;
    height: 14px;
    border: 3px solid #d2d3d2;  <-- want to override with another class
    border-radius: 14px;
    background: #f9f9f9;
}


.timeline .byline {
    padding: .25em 0;
}

Check, there is two rounded timeline balls, I want different color for each ball enter image description here

Upvotes: 0

Views: 164

Answers (2)

Richard Hamilton
Richard Hamilton

Reputation: 26434

You can do this using border-image and linear-gradients. For the gradients, we need to add vendor prefixes.

Unfortunately, gradients do not work on border properties. I found that out through trial and error.

Here is a small example.

.multicolored {
  border-width: 5px;
  border-style: solid;
  border-image: linear-gradient(red, green, blue);
  border-image: -moz-linear-gradieunt(red, green, blue);
  border-image: -webkit-linear-gradient(red, green, blue);
  border-image: -o-linear-gradient(red, green, blue);
}
<ul class='multicolored'>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Mangos</li>
</ul>

It's important to keep in mind that gradients are not available in IE9 or earlier.

If you wanted different border edges to have different colors, you would do the following

<div class='multicolored'>This is a div</div>

.multicolored {
    border-top: 5px solid red;
    border-right: 5px solid green;
    border-bottom: 5px solid blue;
    border-left: 5px solid gold;
}

It's a start. I will work on perfecting it.

Upvotes: 1

justinw
justinw

Reputation: 3966

The easiest way I've found to apply multiple border colors to an element is by not using the border rule but by using the box-shadow rule on an element; this will give the element the appearance of having multiple borders of different colors, even though (as we know, this is not possible with the simple border rule).

FIDDLE

div {
    background: grey;
    height: 100px;
    width: 100px;
    margin: 50px auto 0 auto;
}

.border {
    box-shadow:
    0 0 0 5px red,
    0 0 0 10px yellow,
    0 0 0 15px aqua,
    0 0 0 20px green;
}
<div class="border"></div>

Upvotes: 0

Related Questions