CODEWITHSUNDEEP
htmlcss
kovac
kovac

Reputation: 5389

How to set the background colour for rounded corners with CSS?

I need to have a square with rounded corners (for an HTML email) where the top corners need to be dark grey while the bottom corners to be white. Design for the top looks like:

enter image description here

And the bottom looks like:

enter image description here

My current code for this part is

<tr>
    <td bgcolor="#2B2B34" width="60"></td>
    <td bgcolor="#2B2B34" align="center" style="padding: 50px 0 50px 0;"></td>
    <td bgcolor="#2B2B34" width="60"></td>
</tr>
<tr>
    <td bgcolor="#2B2B34" width="60" height="80"></td>
    <td rowspan="2" style="background: transparent linear-gradient(122deg, #0014FF 0%, #BD2EFF 58%, #FF7828 100%) 0% 0% no-repeat padding-box; border-radius: 16px;">
        <table align="center" cellpadding="0" cellspacing="0" width="480">
            <tr>
                <td align="center" style="padding: 40px 0 36px 0;"></td>
            </tr>
            <tr>
                <td align="center" style="padding: 0 0 35px 0; font-family: 'JetBrains Mono'; font-size: 24px; letter-spacing: 0px; color: #FFFFFF;opacity: 1;">Hello</td>
            </tr>
        </table>
    </td>
    <td bgcolor="#2B2B34" width="60" height="80"></td>
</tr>
<tr>
    <td bgcolor="#FFFFFF"></td>
    <td bgcolor="#FFFFFF"></td>
</tr>

However, the final result of this is

enter image description here

The top rounded corners have a white background instead of the dark grey.

Upvotes: 1

Views: 2935

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105933

you may also use a linear-gradient on the tr itself from transparent to dark for the last part:

<table>
  <tr>
    <td bgcolor="#2B2B34" width="60"></td>
    <td bgcolor="#2B2B34" align="center" style="padding: 50px 0 50px 0;"></td>
    <td bgcolor="#2B2B34" width="60"></td>
  </tr>
  <tr style="background:linear-gradient(0deg,transparent 80%, #2B2B34 80%)">
    <td bgcolor="#2B2B34" width="60" height="80"></td>
    <td rowspan="2" style="background: linear-gradient(122deg, #0014FF 0%, #BD2EFF 58%, #FF7828 100%) ; border-radius: 16px;">
      <table align="center" cellpadding="0" cellspacing="0" width="480">
        <tr>
          <td align="center" style="padding: 40px 0 36px 0;"></td>
        </tr>
        <tr>
          <td align="center" style="padding: 0 0 35px 0; font-family: 'JetBrains Mono'; font-size: 24px; letter-spacing: 0px; color: #FFFFFF;opacity: 1;">Hello</td>
        </tr>
      </table>
    </td>
    <td bgcolor="#2B2B34" width="60" height="80"></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF"></td>
    <td bgcolor="#FFFFFF"></td>
  </tr>
</table>

result :render

also without space in between cells:

<table cellspacing=0>
  <tr>
    <td bgcolor="#2B2B34" width="60"></td>
    <td bgcolor="#2B2B34" align="center" style="padding: 50px 0 50px 0;"></td>
    <td bgcolor="#2B2B34" width="60"></td>
  </tr>
  <tr style="background:linear-gradient(0deg,transparent 80%, #2B2B34 80%)">
    <td bgcolor="#2B2B34" width="60" height="80"></td>
    <td rowspan="2" style="background: linear-gradient(122deg, #0014FF 0%, #BD2EFF 58%, #FF7828 100%) ; border-radius: 16px;">
      <table align="center" cellpadding="0" cellspacing="0" width="480">
        <tr>
          <td align="center" style="padding: 40px 0 36px 0;"></td>
        </tr>
        <tr>
          <td align="center" style="padding: 0 0 35px 0; font-family: 'JetBrains Mono'; font-size: 24px; letter-spacing: 0px; color: #FFFFFF;opacity: 1;">Hello</td>
        </tr>
      </table>
    </td>
    <td bgcolor="#2B2B34" width="60" height="80"></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF"></td>
    <td bgcolor="#FFFFFF"></td>
  </tr>
</table>

Upvotes: 1

Zoli Szab&#243;
Zoli Szab&#243;

Reputation: 4534

First things first, in 2020 you shouldn't really use tables for creating HTML layouts. You just provided a perfect example of why it is deprecated and hard to use nowadays.

The white background you see in the rounded corners is actually the background of the page. Try setting some other background color for your <body> and check out the result.

I can't think of a way making this work with your current markup. (edit: cool hacky solution provided in another answer: https://stackoverflow.com/a/63829769/3219919)

If you want to stick to tables, you could horizontally split the "hello" <td> into two using an additional <table> with two <tr><td></td></tr>s and set only top round corners for the first <td> and only bottom round corners for the second <td> with solid dark, respectively white backgrounds applied for the two <tr>s.

BUT I would definitely recommend checking out newer methods for doing layouts, like CSS grids or even flexbox. But for this particular example, you even do not necessarily need those.

Look, something very similar put together using two tags and some CSS: https://jsfiddle.net/41qgut7e/1/

div {
  background: #2B2B34;
  padding: 20px;
}

h1 {
  background: transparent linear-gradient(122deg, #0014FF 0%, #BD2EFF 58%, #FF7828 100%) 0% 0% no-repeat padding-box;
  border-radius: 16px;
  font-family: 'JetBrains Mono';
  font-size: 24px;
  text-align: center;
  color: #FFFFFF;
  padding: 50px;
  margin: 0;
  margin-bottom: -50px;
}
<div>
  <h1>
    Hello
  </h1>
</div>

Upvotes: 0

Yevhenii Shlapak
Yevhenii Shlapak

Reputation: 796

Try to add bgcolor="#2B2B34" to second tr

Upvotes: 0

Related Questions