Cuadro con las esquinas redondeadas

A pedido de muchos de nuestros usuarios realizamos este artículo en donde explicaremos cómo realizar un cuadro con las esquinas redondeadas.

Ejemplo de cuadro redondeado:

Código HTML:

El código html que debemos utilizar es muy sencillo, se trata de simplemente de una tabla de de 3×3 (divida en 9 partes).
El tag <table..> abre la nueva tabla, veremos que allí dentro utilizamos el tag <tr> que abre una nueva fila, y dentro de esta última, veremos 3 tags <td..> con cada una de las celdas (para mayor información visite los tutoriales de html).

<table border="0" cellspacing="0" cellpadding="0" width="200">
<tr>
<td bgcolor="#FFCC00" width="19"><img src="circ1.gif" width="19" height="18"></td>
<td bgcolor="#FFCC00"></td>
<td bgcolor="#FFCC00" width="19"><img src="circ2.gif" width="19" height="18"></td>
</tr>
<tr>
<td bgcolor="#FFCC00" width="19"></td>
<td bgcolor="#FFCC00"><u><strong><font face="Verdana" size="2">Ejemplo</font></strong></u><p><font
face="Verdana" size="2">En este espacio es donde tienes que poner el contenido del cuadro.</font></td>
<td bgcolor="#FFCC00" width="19"></td>
</tr>
<tr>
<td bgcolor="#FFCC00" width="19"><img src="circ3.gif" width="19" height="18"></td>
<td bgcolor="#FFCC00"></td>
<td bgcolor="#FFCC00" width="19"><img src="circ4.gif" width="19" height="18"></td>
</tr>
</table>

Ustedes pueden diseñar sus propios cuadros redondeados, solamente deben realizar las 4 curvas con algún editor gráfico (como Fireworks, Paint Shop Pro, etc.), y buscar un color que se adecue al diseño de un sitio.

Deja un comentario