CSSを使用して画像を丸くする方法

1. border-radius プロパティを使用する方法:

.rounded-image {
  border-radius: 50%;
}

上記のコードは、rounded-image クラスを持つ要素の画像を丸くします。border-radius プロパティの値を 50% に設定することで、要素全体が丸い形状になります。

2. clip-path プロパティを使用する方法:

.rounded-image {
  clip-path: circle(50%);
}

上記のコードは、同じく rounded-image クラスを持つ要素の画像を丸くします。clip-path プロパティに circle(50%) を指定することで、要素全体が円形のクリップパスによって切り抜かれます。

3. mask-image プロパティを使用する方法:

.rounded-image {
  mask-image: radial-gradient(circle at center, transparent 50%, black 51%);
  mask-size: cover;
}

上記のコードは、またもや rounded-image クラスを持つ要素の画像を丸くします。mask-image プロパティに円形のグラデーションを指定し、mask-size プロパティを cover に設定することで、要素全体にグラデーションが適用され、画像が丸く表示されます。

これらの方法を使用すると、CSSを使って画像を丸くすることができます。自分のニーズや好みに合わせて、適切な方法を選択してください。