0

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)?

BVernon
  • 3,205
  • 5
  • 28
  • 64
  • 2
    It would help a lot if you give an example of your HTML of the table, and the code of what doesn't work. – Aydin4ik Mar 22 '23 at 18:19
  • 1
    I assume you've tried everything from https://stackoverflow.com/questions/4861224/how-to-use-css-to-surround-a-number-with-a-circle?rq=2 ? – AKX Mar 22 '23 at 18:19
  • Possible solutions for this depend too heavily on your markup and limitations to be able to answer definitively without a [mcve]. – TylerH Mar 22 '23 at 19:13

3 Answers3

2

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>
AKX
  • 152,115
  • 15
  • 115
  • 172
  • This is great. I needed a solid circle but was able to achieve that easily after adjusting color parameters. The only minor issue I have now is that I would like for the circle to be a tad larger, but then it gets clipped because it goes beyond the edges of the td element. Fiddling with overflow hasn't seemed to help. Any suggestion for that? – BVernon Mar 22 '23 at 19:09
  • Not really - it's necessarily constrained to the element's size. – AKX Mar 23 '23 at 05:20
  • @BVernon A suggestion is to use CSS pseudo-classes. Check out other answers to your Q. – Aydin4ik Mar 29 '23 at 05:17
2

You can achieve this by using a combination of CSS ::before or ::after pseudo-elements along with position: absolute;.

body {
  font-family: Arial, sans-serif;
}

table {
  border-collapse: collapse;
}

td {
  padding: 20px;
  text-align: center;
  position: relative;
}

.number {
  display: inline-block;
}

.number.selected::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid black;
  border-radius: 50%;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Circle Around Number</title>
</head>
<body>
  <table>
    <tr>
      <td><span class="number">1</span></td>
      <td><span class="number">2</span></td>
      <td><span class="number">3</span></td>
    </tr>
    <tr>
      <td><span class="number">4</span></td>
      <td><span class="number selected">5</span></td>
      <td><span class="number">6</span></td>
    </tr>
    <tr>
      <td><span class="number">7</span></td>
      <td><span class="number">8</span></td>
      <td><span class="number">9</span></td>
    </tr>
  </table>
</body>
</html>
steev
  • 304
  • 1
  • 7
1

Without knowing the specifics of your HTML, I would suggest using ::after pseudo-class. By doing so, we are drawing a circle "after" the number, but with absolute placement we are centering it in the td. And since the number is also centered in the td, we have a perfect circle around our number.

td {
  width: 3em;
  height: 2em;
  text-align: center;
  padding: 5px 0;
}
.circled {
  position: relative;
}
.circled::after {
  content: "";
  position: absolute;
  width: 2em;
  height: 2em;
  border: 1px solid red;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td class="circled">5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td class="circled">11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
    </tr>
    <tr>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
      <td>19</td>
      <td>20</td>
      <td class="circled">21</td>
    </tr>
    <tr>
      <td class="circled">22</td>
      <td>23</td>
      <td>24</td>
      <td>25</td>
      <td>25</td>
      <td>27</td>
      <td>28</td>
    </tr>
  </tbody>
</table>
Aydin4ik
  • 1,782
  • 1
  • 14
  • 19