# Chromium table border bug(?) with gradients

**URL:** https://meta.discourse.org/t/chromium-table-border-bug-with-gradients/286895
**Category:** Development
**Tags:** css
**Created:** [November 28, 2023, 10:19pm UTC](https://meta.discourse.org/t/chromium-table-border-bug-with-gradients/286895 "2023-11-28T22:19:31Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![polyzium](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/polyzium/32/344527_2.png) [@polyzium](https://meta.discourse.org/u/polyzium)
#### Post date: [November 28, 2023, 10:19pm UTC](https://meta.discourse.org/t/chromium-table-border-bug-with-gradients/286895/1 "2023-11-28T22:19:31Z")

</div>

Greetings folks. We have started moving our forum from the proprietary Xenforo to the open-source Discourse, and in the process of replicating visuals of our old forum I ran across a Chrome-specific CSS issue.  
**I don’t know if anybody else ran across this, I couldn’t find any other forum topics about it here.**

I tried implementing gradient on anything that is a table, in this case category list and topic list.  
On Firefox it looks like it should:

> **Screenshot**
>
> ![image](https://global.discourse-cdn.com/meta/original/4X/2/0/d/20dbb6afb562500a07c0298d944e6a26aa1278d0.png)

but Chromium based browsers seem to render an extra border:

> **Screenshot**
>
> ![image](https://global.discourse-cdn.com/meta/original/4X/f/6/3/f63a4fcc914b5b7445730f0c82932468b68d1d44.png)

And this is the CSS in question (using category list inside a category as an example):

> **Code**
>
> ```css
> #header-list-area .category-list > thead > tr {
> border-color: #a3a3a3;
> background-image: linear-gradient(to right, #a3a3a3, #424242);
> }
> .category-list > thead > tr {
> border-width: 0px;
> border-left-width: 6px;
> border-style: solid;
> }
> 
> ```

If I use `background-color`, both browsers render the `<th>` identically, that is without the extra layered border.

I could not reproduce this issue with vanilla HTML+CSS, codepen or any other similar tools. If you know your way around Discourse’s DOM and CSS selectors/rulesets, your help would be gladly appreciated.

---

<div class="post-metadata">

### Author: ![polyzium](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/polyzium/32/344527_2.png) [@polyzium](https://meta.discourse.org/u/polyzium)
#### Post date: [November 29, 2023, 5:33pm UTC](https://meta.discourse.org/t/chromium-table-border-bug-with-gradients/286895/2 "2023-11-29T17:33:07Z")

</div>

I think I managed to figure it out.  
I had to apply the border to `tr > th:first-child` instead of `tr`. Now both browsers render identically.  
I have zero clue what was that bug that the `tr` tag had. Might be a one off or something.

This isn’t a clean solution, but that’ll do as it is visually the same.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [December 29, 2023, 5:33pm UTC](https://meta.discourse.org/t/chromium-table-border-bug-with-gradients/286895/3 "2023-12-29T17:33:08Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.