Adding a border around the first row in a table (and other styling)? <p>I'm trying to style the first row of a table, which is supposed to serve as a heading-row. Unfortunately, I can't seem to get a visible border around this row.</p> <p>I went about this by trying to use the first:child pseudo class. I managed to successfully get a background gradient added to this row. The code for that looks like...</p> <pre><code>tr:first-child { background-color: rgb(116, 195, 80); -webkit-background:linear-gradient(rgb(116, 195, 80), rgb(160, 219, 132)); </code></pre> <p>So now I'm trying to add a border around this row... And none of my code seems to really work. What's making it even more obnoxious for me is the fact that I have plenty of working border code in other parts of this css file... And none of it seems to give a visible border for this row. I actually don't want the border to span for the entire row. I am okay with the border simply going around each column/element within the row.</p> <p>Right now my code is....</p> <pre><code>border-style: groove; border-color: blue; border-height: 5px; border-radius: 4px; </code></pre> <p>There must be something I'm not understanding about table styling... I am not allowed to alter the original html5 file. Here is an example table I'm trying to imitate.</p> <p><a href="https://i.stack.imgur.com/NNzA4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NNzA4.png" alt="Example table heading"></a></p>