0

When I try to round each number in html tables,I apply outline-offset.

It seems the shape is not rounded.

Are there any method for round shape and rounded by aqua?

Thanks

.color {
    background-color: rgb(0,255,0);
    border-radius: 10px;
    outline: 3px solid aqua;
    outline-offset: -3px;
}
<table>
<tr>
<td class=color>1</td>
<td class=color>2</td>
<td class=color>3</td>

</tr>
</table>
Heisenberg
  • 4,787
  • 9
  • 47
  • 76

2 Answers2

1

You cannot round the outline, but you can round the corners of the border inside.

The table-cell style does not allow all the styles that a typical div or span tag can have. Nest your cell data in another element and set styling on that.

table {
  border: 3px solid orange;
}

td {
  padding: 0.25em;
}

.color {
  background-color: rgb(0, 255, 0);
  border-radius: 10px; /* around the border */
  border: 3px solid red; /* inside the outline, outside the padding */
  outline: 3px solid aqua; /* inside the cell, outside the offset/border */
  outline-offset: 3px; /* inside the outline, outside the border */
  padding: 0.25em; /* inside the border */
  margin: 3px; /* inside the cell, outside the outline */
}
<table>
  <tr>
    <td><div class="color">1</div></td>
    <td><div class="color">2</div></td>
    <td><div class="color">3</div></td>
  </tr>
</table>
Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
-1

For rounding each number please use the below code snippet.

#rcorners1 {
  border-radius:85px;
  padding: 10px; 
  width: 20px;
  height: 15px;  
   background-color: rgb(0,255,0);
  
<table>
<tr>
<td class=rcorners1 id=rcorners1>1</td>
<td class=rcorners1 id=rcorners1>2</td>
<td class=rcorners1 id=rcorners1>3</td>

</tr>
</table>
nibedita panda
  • 1
  • 2