border-radius完全ガイド！CSSで画像を丸く表示したり角を丸めるスタイルの方法

border-radius で画像を丸く表示するスタイル例

先生と生徒の会話形式で理解しよう

生徒

「ホームページに載せる写真を、おしゃれな丸い形や角が丸まったデザインにするにはどうすればいいんですか？」

先生

「CSSのborder-radiusという機能を使うと、画像を簡単に丸くしたり角を丸めたりすることができますよ。」

生徒

「初心者でも簡単に丸い画像を作ることができるのでしょうか？」

先生

「それでは、具体的な書き方やきれいな円形にするためのコツを一緒に見ていきましょう！」

1. border-radiusプロパティとは何かを初心者向けに解説

ウェブサイトのデザインをしていると、四角いそのままの写真よりも、角を少し丸めたり綺麗な円形にくり抜いたりすることで、親しみやすや洗練された雰囲気を演出したい場面がよく出てきます。昔は専用のデザインソフトを使ってあらかじめ画像を加工しておく必要がありましたが、現在のウェブ制作ではCSSというスタイルシートの言語を使うことで、ブラウザ上で自由に形を変えることができるようになっています。その中でも最もよく使われる基本的な機能がborder-radiusプロパティです。border-radiusとは、HTML要素の角を丸くするためのCSSプロパティのことです。プログラミング未経験でパソコンの操作にまだ慣れていない方であっても、指定する数値や単位の仕組みを一つずつ順番に覚えていくことで、思い通りのデザインを簡単にウェブページ上に表現できるようになります。

2. 四隅の角を少しだけ丸くして優しい印象にする方法

写真やカード型のボックスを表示するとき、直角のままでは少し硬い印象を与えてしまうことがあります。そのようなときに役立つのが、ピクセル単位の数値を指定して角を軽く丸めるテクニックです。ピクセルとは、パソコンやスマートフォンの画面を構成する小さなドットの数の単位のことで、文字の大きさやボックスの幅、線の太さなどを細かく指定するときに欠かせない基準となります。border-radiusプロパティに対して例えば数値を指定すると、画像の四隅の角がその大きさに応じてなめらかに丸みを帯びるようになります。数値の大きさを大きくすればするほど丸みが強くなり、小さくすれば控えめな丸みになるため、サイト全体の雰囲気に合わせて好みのバランスを自由に調整することが可能です。


<style>
    .rounded-box {
        width: 150px;
        height: 150px;
        border-radius: 15px;
    }
</style>

<div class="rounded-box">
    <img src="/img/sample120-120.jpg" alt="角丸のサンプル" style="width: 100%; height: 100%; object-fit: cover; border-radius: 15px;">
</div>

ブラウザ表示

3. パーセント指定を使って画像を綺麗な正円にする方法

ブログの執筆者プロフィール写真や、スタッフ紹介の顔写真などで、画像をきれいな丸型や正円にくり抜いて表示させたいという要望は非常によくあります。このようなデザインを実現したいときは、パーセントの単位を活用するのが最も定番で確実な方法です。パーセントとは、親となる要素の大きさに対する割合を示す単位のことで、画面のサイズが変わっても比率を保ち続けることができる優れた特徴を持っています。正方形の画像やボックスに対してborder-radiusに50%という数値を指定すると、四隅の丸みが最大まで広がり、完全にきれいな円形となって表示されます。ただし、元となる画像が長方形である場合は、そのまま適用すると楕円形になってしまうため、あらかじめ縦と横の長さを同じにした正方形の領域を用意しておくことが美しい丸画像を作るための大切なポイントとなります。


<style>
    .circle-img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
    }
</style>

<img src="/img/sample120-120.jpg" alt="正円のサンプル画像" class="circle-img">

ブラウザ表示

4. 角ごとに異なる丸みを指定してユニークな形を作る方法

すべての角を一律に同じ丸みにするだけでなく、それぞれの角ごとに個別の数値を指定して変形させることもCSSの高度な魅力の一つです。border-radiusプロパティには、複数の数値をスペースで区切って並べることで、左上、右上、右下、左下の順番にそれぞれの角の丸みを個別にコントロールできる仕組みが備わっています。例えば、対角線上の角だけを大きく丸くして他の角は直角のまま残すことで、通常の四角形や正円とは一味違った独創的でアクセントの効いたデザインフレームを作ることができます。ウェブサイト全体のレイアウトに遊び心を加えたいときや、他のサイトとは少し違うオリジナリティを出したいときに、この個別指定のテクニックを知っておくと表現の幅が大きく広がります。


<style>
    .custom-radius-img {
        width: 150px;
        height: 100px;
        border-radius: 30px 0px 30px 0px;
        object-fit: cover;
    }
</style>

<img src="/img/sample150-100.jpg" alt="カスタム角丸のサンプル" class="custom-radius-img">

ブラウザ表示

5. ブートストラップを使って簡単に丸い画像や角丸を作る方法

自分でCSSの細かいコードを書くのはまだ少し不安というプログラミング初心者の方には、世界中で広く利用されている便利なCSSフレームワークであるBootstrap5を活用するのがおすすめです。Bootstrapとは、あらかじめ綺麗にデザインされた様々なスタイルや部品がセットになっている仕組みのことで、特定のクラス名をHTMLタグに追加するだけでプロ並みのデザインを簡単に実装できるメリットがあります。例えば、画像タグにroundedというクラスを指定するだけで自然な角丸になり、rounded-circleというクラスを指定するだけで瞬時にきれいな円形の画像に変化させることができます。自分で複雑なスタイルシートの記述をしなくても、あらかじめ用意されたクラス名を組み合わせるだけで作業が完結するため、ホームページ作成のスピードと効率が飛躍的に向上します。


<div class="p-2">
    <img src="/img/sample120-120.jpg" alt="Bootstrapの丸画像" class="rounded-circle" style="width: 100px; height: 100px; object-fit: cover;">
</div>

ブラウザ表示

6. 画像を丸く表示する際によくあるトラブルと解決策のコツ

border-radiusを使って画像を丸く加工するときに、初心者がよく直面する代表的なトラブルとして、画像が意図せず横長に引き伸ばされたり、肝心な被写体の中心部分が枠からはみ出て見えなくなってしまったりする現象があげられます。このような問題を解決するために不可欠なのが、先ほど別の学習項目でも登場したobject-fitプロパティとの組み合わせです。正方形のボックスを用意してborder-radiusで円形にしつつ、内部の画像に対してobject-fitのcoverを指定することで、比率を美しく保ったまま枠の形にぴったりと収めることができるようになります。また、画像のファイルサイズ自体をあらかじめ適切に軽量化しておくことや、alt属性に画像の説明文を正しく記述して検索エンジンに内容を伝える配慮を行うことが、ユーザービリティの向上およびSEO対策としても非常に大切です。


<style>
    .avatar-wrapper {
        width: 130px;
        height: 130px;
        border-radius: 50%;
        overflow: hidden;
        border: 3px solid #0d6efd;
    }
    .avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>

<div class="avatar-wrapper">
    <img src="/img/sample120-120.jpg" alt="枠線付きの丸いアバター画像" class="avatar-img">
</div>

ブラウザ表示