<div class="container">
  <div class="item">
    <img src="https://b.0218.jp/hiro0218.png" class="border-radius">
    <span>border-radius: 42%</span>
  </div>

  <div class="item">
    <img src="https://b.0218.jp/hiro0218.png" class="clip-path">
    <span>clip-path: polygon</span>
  </div>
</div>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: monospace, monospace;
}

.container {
  display: flex;
}

.item {
  text-align: center;

  > * {
    display: block;
  }

  & + & {
    margin-left: 1rem;
  }
  
  span {
    margin-top: 0.5em;
  }
}

img {
  height: 200px;
  width: 200px;

  &.border-radius {
    border-radius: 42%;
  }

  &.clip-path {
    clip-path: polygon(
      100% 50%,
      100% 56.6%,
      100% 59.3%,
      100% 61.4%,
      99.9% 63.2%,
      99.9% 64.8%,
      99.9% 66.2%,
      99.8% 67.5%,
      99.8% 68.7%,
      99.7% 69.8%,
      99.6% 70.8%,
      99.5% 71.8%,
      99.5% 72.8%,
      99.4% 73.7%,
      99.3% 74.6%,
      99.1% 75.4%,
      99% 76.3%,
      98.9% 77%,
      98.8% 77.8%,
      98.6% 78.5%,
      98.5% 79.2%,
      98.3% 79.9%,
      98.1% 80.6%,
      98% 81.3%,
      97.8% 81.9%,
      97.6% 82.5%,
      97.4% 83.1%,
      97.2% 83.7%,
      97% 84.3%,
      96.8% 84.8%,
      96.5% 85.4%,
      96.3% 85.9%,
      96% 86.4%,
      95.8% 86.9%,
      95.5% 87.4%,
      95.3% 87.9%,
      95% 88.3%,
      94.7% 88.8%,
      94.4% 89.2%,
      94.1% 89.7%,
      93.8% 90.1%,
      93.4% 90.5%,
      93.1% 90.9%,
      92.8% 91.3%,
      92.4% 91.7%,
      92% 92%,
      91.7% 92.4%,
      91.3% 92.8%,
      90.9% 93.1%,
      90.5% 93.4%,
      90.1% 93.8%,
      89.7% 94.1%,
      89.2% 94.4%,
      88.8% 94.7%,
      88.3% 95%,
      87.9% 95.3%,
      87.4% 95.5%,
      86.9% 95.8%,
      86.4% 96%,
      85.9% 96.3%,
      85.4% 96.5%,
      84.8% 96.8%,
      84.3% 97%,
      83.7% 97.2%,
      83.1% 97.4%,
      82.5% 97.6%,
      81.9% 97.8%,
      81.3% 98%,
      80.6% 98.1%,
      79.9% 98.3%,
      79.2% 98.5%,
      78.5% 98.6%,
      77.8% 98.8%,
      77% 98.9%,
      76.3% 99%,
      75.4% 99.1%,
      74.6% 99.3%,
      73.7% 99.4%,
      72.8% 99.5%,
      71.8% 99.5%,
      70.8% 99.6%,
      69.8% 99.7%,
      68.7% 99.8%,
      67.5% 99.8%,
      66.2% 99.9%,
      64.8% 99.9%,
      63.2% 99.9%,
      61.4% 100%,
      59.3% 100%,
      56.6% 100%,
      50% 100%,
      43.4% 100%,
      40.7% 100%,
      38.6% 100%,
      36.8% 99.9%,
      35.2% 99.9%,
      33.8% 99.9%,
      32.5% 99.8%,
      31.3% 99.8%,
      30.2% 99.7%,
      29.2% 99.6%,
      28.2% 99.5%,
      27.2% 99.5%,
      26.3% 99.4%,
      25.4% 99.3%,
      24.6% 99.1%,
      23.7% 99%,
      23% 98.9%,
      22.2% 98.8%,
      21.5% 98.6%,
      20.8% 98.5%,
      20.1% 98.3%,
      19.4% 98.1%,
      18.7% 98%,
      18.1% 97.8%,
      17.5% 97.6%,
      16.9% 97.4%,
      16.3% 97.2%,
      15.7% 97%,
      15.2% 96.8%,
      14.6% 96.5%,
      14.1% 96.3%,
      13.6% 96%,
      13.1% 95.8%,
      12.6% 95.5%,
      12.1% 95.3%,
      11.7% 95%,
      11.2% 94.7%,
      10.8% 94.4%,
      10.3% 94.1%,
      9.9% 93.8%,
      9.5% 93.4%,
      9.1% 93.1%,
      8.7% 92.8%,
      8.3% 92.4%,
      8% 92%,
      7.6% 91.7%,
      7.2% 91.3%,
      6.9% 90.9%,
      6.6% 90.5%,
      6.2% 90.1%,
      5.9% 89.7%,
      5.6% 89.2%,
      5.3% 88.8%,
      5% 88.3%,
      4.7% 87.9%,
      4.5% 87.4%,
      4.2% 86.9%,
      4% 86.4%,
      3.7% 85.9%,
      3.5% 85.4%,
      3.2% 84.8%,
      3% 84.3%,
      2.8% 83.7%,
      2.6% 83.1%,
      2.4% 82.5%,
      2.2% 81.9%,
      2% 81.3%,
      1.9% 80.6%,
      1.7% 79.9%,
      1.5% 79.2%,
      1.4% 78.5%,
      1.2% 77.8%,
      1.1% 77%,
      1% 76.3%,
      0.9% 75.4%,
      0.7% 74.6%,
      0.6% 73.7%,
      0.5% 72.8%,
      0.5% 71.8%,
      0.4% 70.8%,
      0.3% 69.8%,
      0.2% 68.7%,
      0.2% 67.5%,
      0.1% 66.2%,
      0.1% 64.8%,
      0.1% 63.2%,
      0% 61.4%,
      0% 59.3%,
      0% 56.6%,
      0% 50%,
      0% 43.4%,
      0% 40.7%,
      0% 38.6%,
      0.1% 36.8%,
      0.1% 35.2%,
      0.1% 33.8%,
      0.2% 32.5%,
      0.2% 31.3%,
      0.3% 30.2%,
      0.4% 29.2%,
      0.5% 28.2%,
      0.5% 27.2%,
      0.6% 26.3%,
      0.7% 25.4%,
      0.9% 24.6%,
      1% 23.7%,
      1.1% 23%,
      1.2% 22.2%,
      1.4% 21.5%,
      1.5% 20.8%,
      1.7% 20.1%,
      1.9% 19.4%,
      2% 18.7%,
      2.2% 18.1%,
      2.4% 17.5%,
      2.6% 16.9%,
      2.8% 16.3%,
      3% 15.7%,
      3.2% 15.2%,
      3.5% 14.6%,
      3.7% 14.1%,
      4% 13.6%,
      4.2% 13.1%,
      4.5% 12.6%,
      4.7% 12.1%,
      5% 11.7%,
      5.3% 11.2%,
      5.6% 10.8%,
      5.9% 10.3%,
      6.2% 9.9%,
      6.6% 9.5%,
      6.9% 9.1%,
      7.2% 8.7%,
      7.6% 8.3%,
      8% 8%,
      8.3% 7.6%,
      8.7% 7.2%,
      9.1% 6.9%,
      9.5% 6.6%,
      9.9% 6.2%,
      10.3% 5.9%,
      10.8% 5.6%,
      11.2% 5.3%,
      11.7% 5%,
      12.1% 4.7%,
      12.6% 4.5%,
      13.1% 4.2%,
      13.6% 4%,
      14.1% 3.7%,
      14.6% 3.5%,
      15.2% 3.2%,
      15.7% 3%,
      16.3% 2.8%,
      16.9% 2.6%,
      17.5% 2.4%,
      18.1% 2.2%,
      18.7% 2%,
      19.4% 1.9%,
      20.1% 1.7%,
      20.8% 1.5%,
      21.5% 1.4%,
      22.2% 1.2%,
      23% 1.1%,
      23.7% 1%,
      24.6% 0.9%,
      25.4% 0.7%,
      26.3% 0.6%,
      27.2% 0.5%,
      28.2% 0.5%,
      29.2% 0.4%,
      30.2% 0.3%,
      31.3% 0.2%,
      32.5% 0.2%,
      33.8% 0.1%,
      35.2% 0.1%,
      36.8% 0.1%,
      38.6% 0%,
      40.7% 0%,
      43.4% 0%,
      50% 0%,
      56.6% 0%,
      59.3% 0%,
      61.4% 0%,
      63.2% 0.1%,
      64.8% 0.1%,
      66.2% 0.1%,
      67.5% 0.2%,
      68.7% 0.2%,
      69.8% 0.3%,
      70.8% 0.4%,
      71.8% 0.5%,
      72.8% 0.5%,
      73.7% 0.6%,
      74.6% 0.7%,
      75.4% 0.9%,
      76.3% 1%,
      77% 1.1%,
      77.8% 1.2%,
      78.5% 1.4%,
      79.2% 1.5%,
      79.9% 1.7%,
      80.6% 1.9%,
      81.3% 2%,
      81.9% 2.2%,
      82.5% 2.4%,
      83.1% 2.6%,
      83.7% 2.8%,
      84.3% 3%,
      84.8% 3.2%,
      85.4% 3.5%,
      85.9% 3.7%,
      86.4% 4%,
      86.9% 4.2%,
      87.4% 4.5%,
      87.9% 4.7%,
      88.3% 5%,
      88.8% 5.3%,
      89.2% 5.6%,
      89.7% 5.9%,
      90.1% 6.2%,
      90.5% 6.6%,
      90.9% 6.9%,
      91.3% 7.2%,
      91.7% 7.6%,
      92% 8%,
      92.4% 8.3%,
      92.8% 8.7%,
      93.1% 9.1%,
      93.4% 9.5%,
      93.8% 9.9%,
      94.1% 10.3%,
      94.4% 10.8%,
      94.7% 11.2%,
      95% 11.7%,
      95.3% 12.1%,
      95.5% 12.6%,
      95.8% 13.1%,
      96% 13.6%,
      96.3% 14.1%,
      96.5% 14.6%,
      96.8% 15.2%,
      97% 15.7%,
      97.2% 16.3%,
      97.4% 16.9%,
      97.6% 17.5%,
      97.8% 18.1%,
      98% 18.7%,
      98.1% 19.4%,
      98.3% 20.1%,
      98.5% 20.8%,
      98.6% 21.5%,
      98.8% 22.2%,
      98.9% 23%,
      99% 23.7%,
      99.1% 24.6%,
      99.3% 25.4%,
      99.4% 26.3%,
      99.5% 27.2%,
      99.5% 28.2%,
      99.6% 29.2%,
      99.7% 30.2%,
      99.8% 31.3%,
      99.8% 32.5%,
      99.9% 33.8%,
      99.9% 35.2%,
      99.9% 36.8%,
      100% 38.6%,
      100% 40.7%,
      100% 43.4%
    );
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.