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

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

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

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

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

 

border-radiusとは

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

 

角丸の作り方

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

.button_kadomaru {
  border-radius: 20px;
}

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

 

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

ボタンの角丸

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デザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。

 

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

中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長 開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。 ボランティア活動：小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする市クラブ講座活動を行っている。

 

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

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

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