• HOME > 
  • CSS > 
  • border-radiusを使ってCSSだけで円を作る方法

border-radiusを使ってCSSだけで円を作る方法

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

border-radiusを使えばCSSだけで円を表示できる!

CSSに円を表示する専用のプロパティはありませんが実は、CSSのborder-radiusを応用すればCSSだけ円を作成することが出来ます。

border-radiusとは?

本来はborderで表示させた線に丸みを持たせるプロパティです。

例えばborderで表示させた長方形の角を丸めたい時に使用します。

値は、border-radius:00pxもしくは00%のように指定します。

    &style>
    #circle{
        width:200px;
        height:200px;
        border-solid 3px red;
        border-radius:10px;
    }
    &/style>
    <div id="circle"></div>

border-radiusで作る円の記述の方法

記述はとても簡単で、border-radiusの値を50%に指定することで円になります。

        <style>
        #circle{
            width:200px;
            height:200px;
            border-solid 3px red;
            border-radius:50%;
        }
        </style>
        <div id="circle"></div>
    

今回はわかりやすいようにborderを指定していますが、border(線)を指定せず、border-radiusだけでもちゃんと円になります。

正方形は正円に、長方形は楕円になる

先程のような正円を表示するためには、widthとheightを同じ長さ(正方形になるように)に指定しておく必要があります。

反対にwidthとheightを異なる長さ(長方形になるように)指定したうえでborder-radius:50%にすると楕円になります。

        <style>
        #circle{
            width:200px;
            height:100px;
            border-solid 3px red;
            border-radius:50%;
        }
        </style>
        <div id="circle"></div>
    

box-shadowも円になる

円にした状態でbox-shadowをしてすれば、円に沿って表示してくれます。

        <style>
        #circle{
            width:100px;
            height:100px;
            border-solid 3px red;
            border-radius:50%;
            box-shadow:0 0 10px #333;
        }
        </style>
        <div id="circle"></div>
    

真ん中に文字を表示するには?

border-radiusはあくまでもborder(線)を丸めているだけで、要素が丸くなっているわけではありません。

なので普通に文字を入力すると…

        <style>
        #circle{
            width:200px;
            height:200px;
            border-solid 3px red;
            border-radius:50%;
        }
        </style>
        <div id="circle">円の中に文字</div>
    
円の中に文字円の中に文字円の中に文字

このようにはみだしてしまいます。

なので文字をうまく円の中におさめたい時は、追加で記述が必要です。

        <style>
        #circle{
            width:200px;
            height:200px;
            border-solid 3px red;
            border-radius:50%;
            display:table-cell;
            text-align:center;
            vertical-align:middle;
            word-wrap:break-word;
        }
        </style>
        <div id="circle">円の中に文字</div>
    
円の中に文字円の中に文字円の中に文字

水平位置の中央揃えはtext-align:centerで良いですが、垂直位置の中央揃えvertical-align:middleはテーブル要素にしか使えないので display:table-cellでテーブルはないですが無理やりテーブル要素に変えて指定します。必要に応じてword-wrap:break-wordで文字を折り返すようにしておかないと、 文字数が多くなった際に円が楕円になってしまいます。

border-radiusを使ってCSSだけで画像を丸くトリミング(切り取り)する方法

画像(imgタグ)に対しても同様にborder-radius:50%を指定することで画像をトリミングすることが出来ます。

        <style>
        #circle{
            border-radius:50%;
        }
        </style>
        <img id="circle" src="https://cdn.pixabay.com/photo/2020/11/26/11/48/cat-5778777_960_720.jpg"></div>
    

しかしこの方法の場合、もとの画像が正方形でなければ正円にトリミングすることはできません。

正円にトリミングしたい場合は、backgroundを使用して表示させます。

        <style>
        #circle{
            width:200px;
            height:200px;
            border-radius:50%;
            background:url(画像ディレクトリ/sample.jpg)center no-repeat;
            background-size:cover;
        }
        </style>
        <div id="circle"></div>
    

background-imageを使用した方法であればもとの画像のサイズに関わらず指定したサイズの円にトリミングできるので便利です。

CSSのbackground-imageについて詳しくはこちら

まとめ

このように簡単な記述でCSSだけで円を表示することが出来ました。画像のトリミングはわざわざ画像編集ソフトを使わなくて済むので使いどころも多いのではないでしょうか?

円を使用してデザインするのであればやはりillustratorやphotoshopでの作成して画像として表示させた方がベターです。

広告
広告

関連する記事

サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。
サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。
サムネイル

CSSのclamp()・max()・min()の使い方【プロ……

2023年01月16日
最終更新日:2023年03月10日
clamp()・max()・min()はCSSのプロパティの値の指定に利用できる比較関数です。複数の値を比較し1つの値を導きだし上限や下限を設定できます。
サムネイル

CSSのfont-feature-settingsの使い方【……

2023年01月16日
最終更新日:2023年03月10日
font-feature-settingsは、文字本来のサイズに応じてフォントの文字詰め(カーニング)を設定するためのプロパティです。