Search code examples
htmlcsscss-shapes

How to draw a circle around a number WITHOUT moving it?


There are plenty of examples of drawing circles around numbers using border-radius. However, the problem I have is that I am displaying numbers in columns and rows (in a table) to form a calendar and when I add a class to put a circle around a selected date using this method it moves the number. I find myself having to fiddle around with padding and such to get both the circle in the right place and the number centered in the circle properly... and then it only works for the precise sizing I set it up for. If someone were to say "can you make that font a bit bigger/smaller" then I would have go through this trial and error process again.

So how can I put a circle around a number without moving the position of the number where it was before I added the circle (and, obviously, have the circle centered on the number)?


Solution

  • A trick you could use is a CSS radial gradient of a transparent "halo":

    td {
      width: 3em;
      height: 3em;
      border: 1px solid silver;
      padding: 0;
      text-align: center;
      background: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(17, 17, 121, 0) 65%, rgba(9, 9, 116, 1) 66%, rgba(9, 9, 121, 0) 70%, rgba(255, 255, 255, 0) 100%);
      background-size: 100% 100%;
    }
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>64</td>
      </tr>
    </table>