Rounded brackets around a table (matrix)

Question

I have a simple matrix with some input boxes in that I've created using MathML. It works great in Firefox but not Chrome and I'd like to recreate the same sort of thing using just HTML (a table) and CSS such that it works with more browsers.

Here's a link to a screenshot of the intended effect, since I can't post images: https://i.imgur.com/P2ICwSb.png

Working MathML snippet:

input {
  width: 24px;
  background-color: transparent;
  border: 1px solid gray;
  font-family: serif;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
}
input + input {
  margin-right: 2em;
}
input:first-child {
  margin-left: 1em !important;
}

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <semantics>
    <mrow>
      <mo>(</mo>
      <mtable columnalign="center center center" rowspacing="1ex" displaystyle="false">
        <mtr>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
        </mtr>
        <mtr>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
        </mtr>
        <mtr>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
        </mtr>
      </mtable>
      <mo>)</mo>
    </mrow>
  </semantics>
</math>

My initial thought was to use the border-radius property and set the left and right borders on the table. There's a working snippet below, but I don't like how the top and bottom of the brackets turned out compared to the original MathML code. The lines are noticeably thinner at the top and bottom of the matrix when using the border-radius approach and seem to 'fade out'.

First attempt snippet using <table> and border-radius:

input {
  width: 24px;
  background-color: transparent;
  border: 1px solid gray;
  font-family: serif;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
}
input {
  margin-right: 1em;
}
td:first-child input {
  margin-left: 1em !important;
}
td:last-child input {
  margin-right: 1em !important;
}
table {
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}

<table>
  <tbody>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
  </tbody>
</table>

I tried using CSS 2D transforms and actual text to achieve the same effect, but it didn't turn out particularly well.

Experiment using CSS transforms and <table>:

input {
  width: 24px;
  background-color: transparent;
  border: 1px solid gray;
  font-family: serif;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
}
input {
  margin-right: 1em;
}
td:first-child input {
  margin-left: 1em !important;
}
td:last-child input {
  margin-right: 1em !important;
}
table {
  display: inline-block;
  vertical-align: middle;
}
span {
  font-family: 'Latin Modern Math';
  transform: scale(2, 4);
  font-size: 2em;
  display: inline-block;
  vertical-align: middle;
}

<span>(</span>
<table>
  <tbody>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
  </tbody>
</table><span>)</span>

Is there any way I can more closely match the original behavior of the MathML code? I was wondering if an SVG-based solution might be better.

I know the MathML code renders the brackets using the Latin Modern Math font but I'm unsure how I can stretch the brackets to surround the table (regardless of its contents).

Answer 1

I would make two images of brackets (one left, one right) and set their height to 100%. Through this you can circumvent using real text (and with it the font-size property).

Then set the container to position: relative and the images to position: absolute; left(/right): 0px; top: 0px; height:100%;. The should fit in between if you write position: absolute; left:width of your left bracket; right:width of your right bracket;.

Hope that helps :-)