2

Tengo un td, con un color de fondo y un border-radius aplicado.

Mi idea es que la mitad superior tenga un color y la inferior otra, pero al colocar un div para hacer la división del td, y colocar un color de fondo, este se superpone al borde del td.

Este es mi código:

<table width="100" height="100" align="center">
  <tr>
    <td valign="top" align="center" style="background-color: #FDD000; border-radius: 50px;">
      <div style="height: 50px; width: 100px; overflow: hidden;">
        <div style="height: 100%; width: 100%; background-color: #f5f5f5">

        </div>
      </div>
    </td>
  </tr>
</table>

imagen ejemplo

2 respuestas 2

1

Puedes lograrlo dándole esquinas redondeadas en la parte superior izquierda y derecha con border-top-left-radius: 50px y border-top-right-radius: 50px:

<table width="100" height="100" align="center">
  <tr>
    <td valign="top" align="center" style="background-color: #FDD000; border-radius: 50px;">
      <div style="height: 50px; width: 100px; overflow: hidden; border-top-left-radius: 50px; border-top-right-radius: 50px">
        <div style="height: 100%; width: 100%; background-color: #f5f5f5"></div>
      </div>
    </td>
  </tr>
</table>

O si gustas también usando linear-gradient:

<table width="100" height="100" align="center">
  <tr>
    <td valign="top" align="center" style="background: linear-gradient(to top, #FDD000 50%, #f5f5f5 50%); border-radius: 50px;">
    </td>
  </tr>
</table>

0

Hay dos formas: overflow:hidden; border-radius:50px.

En este caso, al contenedor td podrías agregarle un overflow:hidden:

            
            <table width="100" height="100" align="center">
<tr>
<td valign="top" align="center" style="background-color: #FDD000; border-radius: 50px;overflow:hidden">
    <div style="height: 50px; width: 100px; overflow: hidden;">
        <div style="height: 100%; width: 100%; background-color: #f5f5f5">
            
        </div>
    </div>
</td>
</tr>

            

En este otro caso, más recomendable, se puede moldear al div y darle borde igual que al contenedor padre td:

border-top-left-radius: 50px;
border-top-right-radius: 50px;

            
            <table width="100" height="100" align="center">
<tr>
<td valign="top" align="center" style="background-color: #FDD000; border-radius: 50px;">
    <div style="height: 50px; width: 100px; overflow: hidden;">
        <div style="height: 100%; width: 100%; background-color: #f5f5f5; border-top-left-radius:50px;border-top-right-radius:50px">
            
        </div>
    </div>
</td>
</tr>

            

Esto se puede mejorar mucho más agregando un archivo de estilo css.

1
  • buenisimo, muchas gracias! me funcionó agregando overflow al td, en este caso es para un correo, por lo que agregar una hoja css no me es factible, :C Muchas GRACIAS!
    – Esteban
    Commented el 27 mar. 2023 a las 19:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.