How to apply multiple color on a single td's border (left side only)? Just like below attached image

Question

I have tried out background-image: linear-gradient(to top, red 50%, green 50%).

But It's covering the whole checkbox and add colours from top to bottom.

I want to apply only on the left side border only.

Could you please share your efforts? What you have tried so far? — Vikasdeep Singh, Sep 19 '18 at 02:32
I have tried to add this background-image: linear-gradient(to top, red 50%, green 50%) this styles to my existing td but it did not work out. referring to this link: https://stackoverflow.com/questions/38850419/how-to-create-multi-color-border-in-css3 — Mainak Chakrabortty, Sep 19 '18 at 03:45

Chaska · Answer 1 · 2018-09-19T03:15:28.243

4

You may add a pseudo element to the td and set its background-color like this:

table {
  border-collapse: collapse;
}
td {
  position: relative;
  border: 1px solid #ddd;
  padding: 14px;
}
td:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: -moz-linear-gradient(top, #009eff 50%, #dc3d4c 50%);
  background: -webkit-linear-gradient(top, #009eff 50%,#dc3d4c 50%);
  background: linear-gradient(to bottom, #009eff 50%,#dc3d4c 50%);
}

<table>
  <tr>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
  </tr>
</table>

edited Sep 19 '18 at 03:15

answered Sep 19 '18 at 02:51

Chaska

3,165
1
11
17

Thanks a lot. Can I target to a particular class instead of targeting td? Because in my table all other td's border will be shown like this. – Mainak Chakrabortty Sep 19 '18 at 03:22
Simply select `td`s with specific classname like this: td.my-class:before – Chaska Sep 19 '18 at 03:25
ok thanks buddy :) – Mainak Chakrabortty Sep 19 '18 at 03:29

How to apply multiple color on a single td's border (left side only)? Just like below attached image

1 Answers1