Gradient not showing

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?

#classes {   padding-top: 1em;  padding-right: 4em;  padding-bottom: 2em;  padding-left: 1em;
     background-color: rgb(184, 198, 208); border: ridge;
     border-color: linear-gradient(50deg, rgb(9, 21, 103), rgb(49, 64, 196), rgb(rgb(190, 190, 238)) 50%) ;
     border-style: solid;  border-width: 12px; border-top-right-radius: 20%
}
<section id="classes">
                <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>
            </section>

Welcome to the forums, @boxine. smile

I believe you need to use border-image, not border-color, if you want to use a linear gradient. See the examples below:

1 Like

Now I look more closely, your gradient also seems to be misformed. Try using

border-image: linear-gradient(50deg, rgb(9, 21, 103), rgb(49, 64, 196), rgb(190, 190, 238)) 50%;
1 Like

You’ve got a couple issues:

  1. The gradient is misformed like @TechnoBear stated
  2. 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.

https://codepen.io/davemaxwell/pen/vqJGjR

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>

And the css

#classes{
  background: linear-gradient(50deg, rgb(9, 21, 103), rgb(49, 64, 196), rgb(190, 190, 238)) ;
  border-top-right-radius: 20%;
  color: #000;
  display: inline-block;
  font-size: 20px;
  padding: 12px;
  text-decoration: none;
}
#classes span {
  background-color: rgb(184, 198, 208);
  display: block;
  padding: 1em 3em;
  border-top-right-radius: 20%;
}
2 Likes

Shouldn’t that be a <div>, rather than a <span>, @DaveMaxwell? It has block-level content.

1 Like

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>
#classes{
  background: linear-gradient(50deg, rgb(9, 21, 103), rgb(49, 64, 196), rgb(190, 190, 238)) ;
  border-top-right-radius: 20%;
  color: #000;
  display: inline-block;
  font-size: 20px;
  padding: 12px;
  text-decoration: none;
}
.wrapper {
  background-color: rgb(184, 198, 208);
  padding: 1em 3em;
  border-top-right-radius: 20%;
}
2 Likes

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:

  1. There are radiused borders top and bottom left - your sample only had top right, which is what I provided.
  2. 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

https://codepen.io/davemaxwell/pen/VJMmMb

#classes table{
  background: linear-gradient(50deg, rgb(9, 21, 103), rgb(49, 64, 196), rgb(190, 190, 238)) ;
  border-radius: 10%;
  color: #000;
  display: inline-block;
  font-size: 20px;
  padding: 12px;
  text-decoration: none;
  margin: 1em;
  border-collapse: collapse;
}

#classes th, td {
  background-color: rgb(184, 198, 208);
  padding: .5em;
  
}
#classes th:first-of-type  {
  border-top-left-radius: 20%;  
}
#classes th:last-of-type  {
  border-top-right-radius: 20%;  
}
#classes tr:last-of-type td:last-of-type  {
  border-bottom-right-radius: 20%;  
}
#classes tr:last-of-type td:first-of-type  {
  border-bottom-left-radius: 20%;  
}
1 Like

Thank you very much Dave, it works pretty well!

1 Like