icon
icon

表現を豊かに!CSSでborder-radiusを使って角丸を作る方法【初心者向け】

初心者向けにCSSのborder-radiusを使って角丸を作る方法について解説しています。角丸にしたりもっと丸みを帯びたりといろんな表現をすることができます。応用的な使い方ができる便利なプロパティなので、書き方を覚えておきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

border-radiusを使って角丸を作る方法について解説しています。
ボタンの形や円形のオブジェクトを作る際に便利なプロパティなので、ぜひ書き方を覚えておきましょう。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

田島悠介

今回はborder-radiusについて説明しよう。

大石ゆかり

田島メンター!!border-radiusというのは何ですか~?

田島悠介

ボーダーの線を角丸にするプロパティだよ。どのぐらい丸い形にするかというのも調整することができるんだ。さっそくやってみよう。

大石ゆかり

はい!

 

border-radiusとは

border-radiusとは、buttonやdivの角を丸めるために使うCSSのプロパティです。指定する値は、楕円半径の大きさをpxや%で指定します。

 

角丸の作り方

角丸は、buttonやdivのborder-radiusプロパティを使用することで作ることができます。
例えば、buttonのclassにbutton_kadomaruが割り当てられていた場合、

.button_kadomaru {
  border-radius: 20px;
}

のように指定することで、角丸を作ることができます。
指定する値は、pxの場合は単純に楕円半径の大きさで、%の場合は指定したボックスの幅と高さに対する楕円半径の割合を指定します。

田島悠介

border-radiusの基本の書き方だよ。

大石ゆかり

値のところに、半径の長さや割合を入れるんですね。

田島悠介

指定した値が大きいほど丸い形になるよ。実際に書いて確かめてみよう。

 

それでは実際に書いてみましょう。

ボタンの角丸

CSS部分
---------------------------------
.button_kadomaru {
  background: rgb(92, 92, 255);
  color: rgb(255, 255, 255); 
  border-radius: 10px;
}
---------------------------------
html部分
---------------------------------
<button class="button_kadomaru">
  ボタンが丸くなります。
</button>
---------------------------------

 

pxで半径を指定した場合の角丸

css部分
---------------------------------
.div_kadomaru1 {
  background: rgb(255, 92, 92);
  width: 200px;
  height: 100px;
  padding: 20px;
  border-radius: 20px;
}
---------------------------------
html部分
---------------------------------
<div class="div_kadomaru1">
  このdivが丸くなります。
</div>
---------------------------------

 

%で半径を指定した場合の角丸

css部分
---------------------------------
.div_kadomaru2 {
  background: rgb(92, 255, 92);
  width: 200px;
  height: 100px;
  padding: 20px;
  border-radius: 40%;
}
---------------------------------
html部分
---------------------------------
<div class="div_kadomaru2">
  %でも指定できます。
</div>
---------------------------------

ブラウザで表示します。

buttonやdivが角丸になることが確認できました。

 

[PR] Webデザインで副業する方法とは

丸い葉っぱ形を作る

角を丸くしたり、ちょっと尖らせることができたので、角が丸まった部分と角が完全の尖った部分のある葉っぱ形を作ってみます。
丸っぽい角は、90pxで指定しています。
尖った角は、3pxで指定しています。

今回の変更箇所は次の太字の値です。
border-radius:90px 3px;

css部分

---------------------------------
.div_kadomaru3 {
 background: rgb(92, 255, 92);
 width: 200px;
 height: 100px;
 padding: 20px;
 border-radius:90px 3px;
}
---------------------------------

html部分

---------------------------------
<div class="div_kadomaru3">
 角が丸く尖った葉っぱ形
</div>
---------------------------------

表示結果

 

不規則な丸

緑色の四隅を不規則な円形の形にします。

今回、指定する値を変えて頂く事で、様々な形に変えることができます。

変更箇所は次の太字の値です。

border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;

css部分

---------------------------------
.div_kadomaru4 {
 background: rgb(92, 255, 92);
 width: 200px;
 height: 100px;
 padding: 20px;
 border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
}
---------------------------------

html部分

---------------------------------
<div class="div_kadomaru4">
 </div>
---------------------------------

表示結果

 

以上、border-radiusを使って角丸を作るサンプルをいくつか紹介しました。

ボタンやフォームなど、真四角よりも丸みを帯びた形の方が良いというときに役立つ知識です。書きながら理解していきましょう。

他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。

田島悠介

今回はpxで指定した例と%で指定した例それぞれを見てみたよ。

大石ゆかり

色や大きさなどと同時に指定できるんですね。

田島悠介

border-radiusはボックス以外にもボタンやフォームなど様々な場所で使えるものなのでぜひ覚えておこう。

大石ゆかり

どんどん使ってみたいです。ありがとうございました!

 

この記事を監修してくれた方

中本賢吾(なかもとけんご)
アジマッチ有限会社 代表取締役社長

開発実績:PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。

ボランティア活動:小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする市クラブ講座活動を行っている。

 

また、TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、オリジナルのWebサイトを作ることが可能です。

独学に限界を感じている場合はご検討ください。