CSS border-radius活用術！おしゃれな角丸デザイン3選

初心者の方がCSSでサイトの印象を変えるのに、最も手軽で効果的な方法の一つが**「角丸（border-radius）」**です。

四角い画像を少し丸くするだけで、サイト全体が優しく、モダンな雰囲気になります。

今回は、オシャレな活用例3選を現解説します！

See the Pen Untitled by 広瀬和哉 (@lpvcfdes-the-styleful) on CodePen.

1. border-radiusの基本構造

まずは基本を抑えましょう。 `border-radius` は、要素の「四隅」を丸くするプロパティです。数値（pxや％）を指定することで、丸みの大きさを制御します。

/* 四隅を均等に10px丸くする */
.target {
    border-radius: 10px;
}

現場では、ボタンやカード、画像など、あらゆる要素に使われます。昨日学んだ「画像形式」と組み合わせると、さらに効果的ですよ。
参考：画像形式WebP・PNG・JPGの使い分け！サイト高速化の必須知識

2. オシャレな活用例1：完全な「円」のアバター

記事一覧の著者アイコンやSNSのプロフィール画像などでよく見かける、完全な「円」のデザインです。これは、正方形の要素に対して `border-radius: 50%;` を指定することで簡単に実装できます。

実装コード

<!-- HTML -->
<img src="https://kazoolog.com/wp-content/uploads/2026/03/swiper.jpg" alt="アイキャッチ" class="br-avatar">

/* CSS */
.br-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* 正方形なら完全な円になる */
    object-fit: cover; /* 画像をはみ出させず綺麗に収める（必須！） */
}

3. オシャレな活用例2：ふんわり「丸いボタン」

長方形のボタンの角を大きく丸めることで、ふんわりとした優しく、クリックしやすい印象を与えます。これは、 padding で高さを調整しつつ、 border-radius に大きめの数値を指定するのがコツです。

実装コード

<!-- HTML -->
<a href="#" class="br-btn">詳細を見る</a>

/* CSS */
.br-btn {
    display: inline-block;
    padding: 10px 25px;
    background-color: #7C974C; /* オリーブ */
    color: #fff;
    text-decoration: none;
    border-radius: 30px; /* 高さを超える大きな数値を指定 */
}

現場では、ボタンの色やアニメーションと組み合わせることで、さらにUXを高めます。ボタンの配置や余白（gap）については、メディアクエリの記事でも詳しく解説しています。
参考：【2026年版】実務で迷わないメディアクエリ活用術

4. オシャレな活用例3：個性を出す「変形カード」

四隅の角丸の数値を別々に指定することで、葉っぱのような形や、特定の角だけ丸めるなど、デザインに個性を出せます。これは、サイトのトーン（和風、ポップ、モダンなど）に合わせて使い分けましょう。

実装コード

<!-- HTML -->
<div class="br-card-styled">
  <h3>おすすめ記事</h3>
  <p> border-radius を駆使して、デザインに動きを持たせましょう。</p>
</div>

/* CSS */
.br-card-styled {
    padding: 20px;
    background-color: #f9f5ed; /* ベージュ */
    border-radius: 5px 20px 5px 20px; /* 左上 右上 右下 左下 の順 */
}

5. SEOに影響する？

結論から言うと、「角丸自体がSEOの強さに直接影響することはありません」。Googleはサイトの見た目が角丸かどうかを評価しているわけではないからです。

ただし、角丸によってサイトが優しく見えたり、ボタンがクリックしやすくなったりすることで、ユーザーの滞在時間が伸びたり、収益（CV）に繋がったりします。こうしたユーザー体験（UX）の向上は、結果としてSEO評価を高める要因になりますよ。昨日学んだ「ループの仕組み」と併せて、読者に優しいサイト設計を心がけましょう。
参考：メインループとサブループの違いを徹底解説！

まとめ：角丸はサイトの「おもてなし」の心

CSSの `border-radius` 。このわずか数行のコードが、サイトを訪れるユーザーに「あ、このサイトは優しくて見やすいな」という印象を与えます。定番の円アイコン、ふんわりボタン、そして変形カードと、適材適所で使い分けていきましょう。

岐阜の澄んだ朝の光のように、淀みのない洗練されたサイトを目指して、今日から画像1枚1枚、ボタン1つ1つにこだわってみてください。禁酒で研ぎ澄まされた私の目も、皆さんのサイトがオシャレに変わるのをしっかりチェックしていますよ！（笑）