Hello!
I am a complete beginner with CSS and following a tutorial.
Unfortunately, I cannot get a gradient show on a box. Can someone tell me what is wrong in my code?
You cannot use a gradient border with a radius the way you are, and the border-image approach TB provided doesn’t allow for you to use the border-radius.
So what you’ll need to do is add a “wrapper” element inside the class you want the border-gradient on. Basically what you’ll be doing is applying the gradient as the background of the larger container, then on the inner, you’ll be setting the background to cover the gradient.
The html
<section id="classes">
<span>
<h2>Classes</h2>
<table>
<tr>
<th>Class</th>
<th>Price</th>
<th>Description</th>
</tr>
<tr>
<td>Salt Water</td>
<td>1000</td>
<td>Salt water wind swell fired up reef break tomb-stoning.</td>
</tr>
<tr>
<td>Indy Longboard</td>
<td>1500</td>
<td>Indy longboard late drop loc puff rusty transition ripping.</td>
</tr>
<tr>
<td>Fish set</td>
<td>12.50</td>
<td>Fish set wave.</td>
</tr>
<tr>
<td>Shaka</td>
<td>199.99</td>
<td>Twin keel feathering lip stick lay day shaka </td>
</tr>
</table>
</span>
</section>
Probably but since it’s really just a shim to have a place for the background, it doesn’t really matter. There’s no true semantic purpose for it. But this gives the same results
<section id="classes">
<div class="wrapper">
<h2>Classes</h2>
<table>
<tr>
<th>Class</th>
<th>Price</th>
<th>Description</th>
</tr>
<tr>
<td>Salt Water</td>
<td>1000</td>
<td>Salt water wind swell fired up reef break tomb-stoning.</td>
</tr>
<tr>
<td>Indy Longboard</td>
<td>1500</td>
<td>Indy longboard late drop loc puff rusty transition ripping.</td>
</tr>
<tr>
<td>Fish set</td>
<td>12.50</td>
<td>Fish set wave.</td>
</tr>
<tr>
<td>Shaka</td>
<td>199.99</td>
<td>Twin keel feathering lip stick lay day shaka </td>
</tr>
</table>
</div>
</section>
Good morning and thank you for your help!
When I use your code, I get two boards around my table unfortunately. I am not allowed to modify the html code, I forgot to say!
The only way you would get two borders with the css I provided is if you’ve got two elements with id of classes. That’s not good because the whole point of IDs is to provide a unique (read: only one) identifier. It looks like you’ve added an id=“classes” to the table, which wasn’t there in the sample…
Based on that screenshot, you changed the css I provided, which I can tell by:
There are radiused borders top and bottom left - your sample only had top right, which is what I provided.
The gradient is not there, so the linear gradient setup isn’t right
If you want it JUST around the table, then you can do it this way. You’ll have to play with the radiuses in the td/th areas to get the exact look you want, but it’s close
