Inner border-radius on a table cell - css

Question

I'm trying to create a photo frame with a HTML table and some CSS.
I want to add an inner border-radius to it, but I can't find a way to color "edges" (spaces between "normal border" and "border with radius").
Here's a fiddle that showcases my problem. The objective is to color the edges of the center cell, without coloring it (it must be transparent to show what's underneath, the table background color in the example).
table {
border-spacing: 0;
background-color: aqua;
}
td {
border: solid 1px red;
padding: 50px;
background-color: red;
}
td.middle {
border-radius: 50px;
border: 1px solid green;
background-color: transparent;
}
tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td class="middle">2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>

Answer 1

you need to consider a new element inside your td
if there gonna be an image , you won't need that span inside your div
table {
border-spacing: 0;
background-color: aqua;
}
td {
border: solid 1px red;
padding: 50px;
background-color: red;
}
td.middle {
padding: 0px;
}
#center_frame{
width: 100px;
height: 100px;
margin: auto;
border-radius: 50px;
border: 1px solid green;
border: solid 1px red;
background-color: lightblue;
text-align: center;
}
#center_frame span {
line-height: 100px;
}
tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td class="middle">
<div id="center_frame"><span>2.2</span></div>
</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>

Answer 2

Use radial-gradient for this
table {
border-spacing: 0;
background-color: aqua;
}
td {
border: solid 1px red;
padding: 50px;
background-color: red;
}
td.middle {
background:radial-gradient(farthest-side,transparent 99%,red 100%);
}
tr:first-child td {
border-top-style: solid;
}
tr td:first-child {
border-left-style: solid;
}
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td class="middle">2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
For a custom radius you will need 4 gradient:
table {
border-spacing: 0;
background-color: aqua;
}
td {
border: solid 1px red;
padding: 50px;
background-color: red;
}
td.middle {
background:
radial-gradient(farthest-side at bottom left, transparent 98%,red 100%) top right,
radial-gradient(farthest-side at bottom right,transparent 98%,red 100%) top left,
radial-gradient(farthest-side at top left, transparent 98%,red 100%) bottom right,
radial-gradient(farthest-side at top right,transparent 98%,red 100%) bottom left;
background-size:25% 25%; /* adjust this to control the radius (from 0% to 50% or pixel value) */
background-repeat:no-repeat;
}
tr:first-child td {
border-top-style: solid;
}
tr td:first-child {
border-left-style: solid;
}
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td class="middle">2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>