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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,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] HTML/CSSで挫折しない学習方法を動画で公開中

丸い葉っぱ形を作る

角を丸くしたり、ちょっと尖らせることができたので、角が丸まった部分と角が完全の尖った部分のある葉っぱ形を作ってみます。
丸っぽい角は、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はボックス以外にもボタンやフォームなど様々な場所で使えるものなのでぜひ覚えておこう。

大石ゆかり

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

 

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

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

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