CSSで簡単に角丸画像にする方法

WordPressでも普通のHTMLでも使える、画像の角を丸くするCSSをご紹介します。簡単に見た目を柔らかくできます。

1 基本の角丸

画像の角を少し丸くする場合は、border-radiusを使います。

1.1 HTMl

<img src="https://example.com/wp-content/uploads/20××/××/sample.jpg" alt="角丸10px" class="img-rounded">

1.2 CSS

/* --------------
 * 画像の角丸
 * ------------- */

.img-rounded {
    border-radius: 10px; /* 角の丸みの大きさ */
    display:block;
    margin-bottom:10px;
    border: 2px solid #ccc;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

サンプル画像：

2 丸い画像（円形）

正方形の画像を完全な円形にしたい場合は、border-radius:50%を指定します。

1.1 HTMl

<img src="https://example.com/wp-content/uploads/20××/××/sample.jpg" alt="角丸10px" class="img-circle">

1.2 CSS

/* --------------
 * 画像の角丸
 * ------------- */

.img-circle {
    border-radius: 50%; /* 角の丸みの大きさ（%） */
    display:block;
    margin-bottom:10px;
    border: 2px solid #ccc;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

サンプル画像：

3 特定の角だけ丸くする

例えば、左上と右下だけ丸くしたい場合は次のように指定します。

1.1 HTMl

<img src="https://example.com/wp-content/uploads/20××/××/sample.jpg" alt="特定の角だけ丸く" class="img-custom">

1.2 CSS

/* --------------
 * 画像の角丸
 * ------------- */

.img-custom {
    border-top-left-radius: 20px;   /* 左上 */
    border-top-right-radius: 0px;   /* 右上 */
    border-bottom-right-radius: 20px; /* 右下 */
    border-bottom-left-radius: 0px;  /* 左下 */
    display:block;
    margin-bottom:10px;
    border: 2px solid #ccc;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

サンプル画像：

3.3 補足ポイント

• 親要素に overflow: hidden; を付けると、はみ出しを防げます。
• WordPressで特定の画像だけ丸くしたい場合は、クラスを付けて指定すると便利です。
• 角丸の数値はお好みで調整可能です。

これで、投稿や固定ページ内の画像を簡単に角丸にできます。