Inner Border-radius On A Table Cell

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 borde

Solution 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_framespan {
  line-height: 100px;
}
tr:first-child td { border-top-style: solid; }
trtd: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><tdclass="middle"><divid="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>

Solution 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;
}

trtd: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><tdclass="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;
}

trtd: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><tdclass="middle">2.2</td><td>2.3</td></tr><tr><td>3.1</td><td>3.2</td><td>3.3</td></tr></table>