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

回答1:

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>

回答2:

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>

来源：https://stackoverflow.com/questions/60956703/inner-border-radius-on-a-table-cell

标签

css

html-table