Border color opacity acts differently on table rows

Question

I'm using opacity parametr for rgba color and only last-child element provides the color i want, every other border displays different color. You can even test it by colorpicker in devtools.

body {
  background-color: black;
}
.content > table {
  width: 100%;
  border-collapse: collapse;
  color: white;
}
.content > table > tbody > tr.topic {
  height: 50px;
  border-bottom: 1px solid rgba(16, 151, 255, 0.41);

}

<div class="content">
        <table>
          <tbody>
            <tr class="topic">
              <td class="topic-title">
                <i class="topic-icon"></i>
                Title
              </td>
              <td class="topic-replies">
                <i class="replies-icon"></i>
                15
              </td>
              <td class="topic-author">
                Name
              </td>
              <td class="topic-timestamp">
                <time>20m.</time>
              </td>
            </tr>
            <tr class="topic">
              <td class="topic-title">
                <i class="topic-icon"></i>
                Title
              </td>
              <td class="topic-replies">
                <i class="replies-icon"></i>
                15
              </td>
              <td class="topic-author">
                Name
              </td>
              <td class="topic-timestamp">
                <time>20m.</time>
              </td>
            </tr>
            <tr class="topic">
              <td class="topic-title">
                <i class="topic-icon"></i>
                Title
              </td>
              <td class="topic-replies">
                <i class="replies-icon"></i>
                15
              </td>
              <td class="topic-author">
                Name
              </td>
              <td class="topic-timestamp">
                <time>20m.</time>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

Answer 1

It seems to me a bug in chrome browser.

An alternate approach would be to use background-image instead of border-bottom.

We can use linear-gradient() to achieve the same effect.

.content > table > tbody > tr.topic {
    background-image: linear-gradient(rgba(16, 151, 255, 0.41), rgba(16, 151, 255, 0.41));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 1px;
}

Working Demo:

body {
  background-color: black;
}
.content > table {
  width: 100%;
  border-collapse: collapse;
  color: white;
}
.content > table > tbody > tr.topic {
  height: 50px;
  background-image: linear-gradient(rgba(16, 151, 255, 0.41), rgba(16, 151, 255, 0.41));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 1px;
}

<div class="content">
  <table>
    <tbody>
      <tr class="topic">
        <td class="topic-title">
          <i class="topic-icon"></i>
          Title
        </td>
        <td class="topic-replies">
          <i class="replies-icon"></i>
          15
        </td>
        <td class="topic-author">
          Name
        </td>
        <td class="topic-timestamp">
          <time>20m.</time>
        </td>
      </tr>
      <tr class="topic">
        <td class="topic-title">
          <i class="topic-icon"></i>
          Title
        </td>
        <td class="topic-replies">
          <i class="replies-icon"></i>
          15
        </td>
        <td class="topic-author">
          Name
        </td>
        <td class="topic-timestamp">
          <time>20m.</time>
        </td>
      </tr>
      <tr class="topic">
        <td class="topic-title">
          <i class="topic-icon"></i>
          Title
        </td>
        <td class="topic-replies">
          <i class="replies-icon"></i>
          15
        </td>
        <td class="topic-author">
          Name
        </td>
        <td class="topic-timestamp">
          <time>20m.</time>
        </td>
      </tr>
    </tbody>
  </table>
</div>